JAVASCRIPT EXAMPLES Animated Buttons with Box Shadow
In this example, an instance of the Uize.Widget.HoverFader widget class is adding a JavaScript animation effect to a set of navigation buttons. With help from the Uize.Fx.xShadows extension module, this instance manages fading of values for the box-shadow, margin-left, margin-top, color, and border-color CSS style properties for the buttons. Mouse over the buttons to experience the effect. If your browser supports the CSS3 box-shadow style property, then the buttons should appear to "leap" out of the page when you mouse over them. This is because the box-shadow and margin properties are being faded between two extremes. At one extreme, when the mouse is not over a button, the box shadow for the button has zero horizontal and vertical offset and zero blur radius, and the left and top margins are both at 15px. At the other extreme, when the mouse is over a button, the box shadow is offset horizontally and vertically by 20px and has a blur radius of 25px, and the left and top margins are both at 0px. Fading between these extremes makes the buttons appear to leap out of the page. To add more realism, the Uize.Curve.Rubber module is used to add a bounce quality to the fade back from a button's hover state to its resting state, which makes the buttons bounce as they sink back in and "hit the page surface".