When reading reports about early beta versions of NT5 I heard that the menus were not rolling in and out any more, the were fading. So I sat down and modified my swipe animation to create a fade effect. The fade effect can be done by changing the opacity of an element.
The opacity value is set with a filter called alpha (in Gecko they are using style="opacity: 0.5" but it is still really buggy) like this:
obj.style.filter = "alpha(opacity=" + percentage + ")";
Now all you have to do is to change the percentage value a little bit each time.
To include the fade animation you need to import the file swipe.js like this:
<script type="text/javascript" src="/fade.js"></script>
and to us it you call the function fade. It takes four arguments and looks like this:
fade(element, boolFadeIn, numberOfSteps, timeBetweenEachStep)
If you set the boolFadeIn to false the element is faded out and then hidden.
|
WebFX |
You can of course use both fade and swipe on the same element. Note that the border isn't covered rightly by the alpha filter.
|
WebFX |
||
Basics of Animations
The Swipe Animation
The Fade Animation
Mozilla Swipe and Fade