Help with Hover Fader Text Shadow Animation

27 views
Skip to first unread message

Marcus

unread,
Apr 24, 2012, 3:00:03 PM4/24/12
to UIZE JavaScript Framework Group
Hello all,

I'm using UIZE extensively on my site.

I have the 3D rotator & the Drag-to-Move working as perfectly. I would
like to add the Hover Fader Text Shadow Animation to work on the same
page.

Currently, this how the UIZE script looks like on the page:
http://marklaurel.com/sample.php

<script type="text/javascript">
/*<!-- JavaScript code to make the static bar HTML "come alive" -->*/

Uize.module ({
required:[
/** 3D rotation Viewer **/
'UizeDotCom.Page',
'Uize.Widget.Drag',
'Uize.Fade.xFactory',
// 'Uize.Curve.Rubber',
// 'Uize.Curve.Mod',
/** image drag **/
'Uize.Node',
'Uize.Widget.Drag.Move',
/** txtShadowFade **/
'UizeDotCom.ParamsInspector.InlinePresets',
'Uize.Fx.xShadows',
'Uize.Curve',
'Uize.Curve.Rubber',
'Uize.Curve.Mod',
'Uize.Widget.HoverFader',
'Uize.Json'
],
builder:function () {
/*** create the example page widget ***/
var page = window.page = Uize.Widget.Page ();

/*** configuration variables ***/
var
totalFrames = 49,
frameUrlTemplate =
'/images/mnuSqnz/mnuSqnz.[#frame].png'
;

/*** state variables ***/
var
rotation = 0,
lastFrameNo = 49,
dragStartRotation
;

/*** spawn instances of Uize.Widget.Drag.Move for all the images
***/
Uize.Widget.Drag.Move.spawn ({idPrefix:
{root:'dragMoveGroup',tagName:'IMG'}},page);

/*** create the hover fader instance ***/
page.addChild ('hoverFader',Uize.Widget.HoverFader,{nodes:
{className:/\bmenuLink\b/}});
/*** ***/

/*** ***/

/*** create the Uize.Widget.Drag instance ***/
var rotationViewer = page.addChild (
'rotationViewer',
Uize.Widget.Drag,
{
cancelFade:{duration:
2000,curve:Uize.Curve.Rubber.easeOutBounce ()},
releaseTravel:function (speed) {
var
deceleration = 2000, // measured in pixels/s/s
duration = speed / deceleration
;
return {
duration:duration,
distance:Math.round (speed * duration / 2),
curve:function (_value) {return 1 - (_value = 1 -
_value) * _value}
};
},
html:function (input) {
var
htmlChunks = [],
frameNodeIdPrefix = input.idPrefix + '-frame'
;
for (var frameNo = 0; ++frameNo <= totalFrames;) {
htmlChunks.push (
'<img' +
' id="' + frameNodeIdPrefix + frameNo + '"' +
' src="' + Uize.substituteInto (frameUrlTemplate,
{frame:(frameNo < 49 ? '0' : '') + frameNo}) +'"' +
'/>'
);
}
return htmlChunks.join ('');
},
built:false
}
);

/*** wire up the drag widget with events for updating rotation
degree ***/
function updateRotation (newRotation) {
rotation = ((newRotation % 360) + 360) % 360;
var frameNo = 1 + Math.round (rotation / 360 * (totalFrames -
1));
if (frameNo != lastFrameNo) {
rotationViewer.showNode ('frame'+ lastFrameNo,false);
rotationViewer.showNode ('frame'+ (lastFrameNo = frameNo));
}
/*** add frameNo check to turn navigation on/off ***/
if ((frameNo > 6)&&(frameNo < 10))
{document.getElementById('dBtnHome').style.visibility = 'visible';}
else
{document.getElementById('dBtnHome').style.visibility = 'hidden';}
if ((frameNo > 16)&&(frameNo < 20))
{document.getElementById('dBtnClients').style.visibility =
'visible';}
else
{document.getElementById('dBtnClients').style.visibility =
'hidden';}
if ((frameNo > 26)&&(frameNo < 30))
{document.getElementById('dBtnSandbox').style.visibility =
'visible';}
else
{document.getElementById('dBtnSandbox').style.visibility =
'hidden';}
if ((frameNo > 36)&&(frameNo < 40))
{document.getElementById('dBtnAbout').style.visibility =
'visible';}
else
{document.getElementById('dBtnAbout').style.visibility = 'hidden';}
/**/
}
rotationViewer.wire ({
'Drag Start':function () {dragStartRotation = rotation},
'Drag Update':function (e) {updateRotation (dragStartRotation
+ e.source.eventDeltaPos [0] / 2.5)}
});

/*** function for animating spin ***/
function spin (degrees,duration,curve) {
Uize.Fade.fade (updateRotation,rotation,rotation +
degrees,duration,{quantization:1,curve:curve});
}

/*** initialization ***/
Uize.Node.wire (window,'load',function () {spin
(360,3600,Uize.Curve.easeInOutPow (1))});

/*** wire up the page widget ***/
page.wireUi ();
}
});

</script>

I'd like to use the "Aqua Blur". I can't get it to work. I can only
get it to fade in white/black.
can someone please point me in the right direction?

Thanks in advance...
Reply all
Reply to author
Forward
0 new messages