This animation is done by both clipping and repositioning a block element. The element should look like it is rolling out from the top (or any other direction). At the beginning the element should be displayed just above it's original position and it should be clipped so that it has the height zero. Later it should be displayed y pixel below this position and be clipped so that the height is y. Now just increase the y value until the top position of the element is the same as the original one.

Setting the style

Both the obj.style.top and obj.style.clip needs to be set and this is done like this:

obj.style.clip = "rect(" + (originalHeight - y) + "," + origanalWidth + "," + originalHeight + "," + 0 + ")";
obj.style.top  = originalTop - originalHeight + y;

swipe.js

To include the swipe animation you need to import the file swipe.js like this:

<script type="text/javascript" src="/swipe.js"></script>

and to us it you call the function swipe. It takes four arguments and looks like this:

swipe(element, direction, numberOfSteps, timeBetweenEachStep)

The direction is a number that you get from your numpad, so 8 means up and 6 means left. This script allows multiple elements to be animated at the same time and at different speed. The two last arguments are optional and the default value is 4 steps with a period of 25ms.


WebFX
 



Basics of Animations
The Swipe Animation
The Fade Animation

Author: Erik Arvidsson

Back to Main page
Page designed and maintained by Erik Arvidsson and Emil A. Eklund
n
n
Back