Jquery - Bouncing Box ScreenSaver

This tutorial will show you how to build a jquery screen saver for your site. I got this silly idea when i had to create a 'website offline' or 'website under maintenance' screen and show something more than just some lines of text. This Screen saver contains a box that bounces back n forth on the walls while simultaneously changing its color.The code is very simple and needs no explanation.


Any elements in the html can be easily animated using a simple function in jquery -> animate(). You can change most of the properties of an element, and it will apply a smooth transition to these changes.
animate() takes following arguments :
properties : specify the new properties here.
duration : the time stretch for this animation in miliseconds.
easing : type of animation.
callback : the function to be called when animation completes.

animate(properties,duration,easing,callback)

In properties you specify the new properties of the element, like height, width, background etc. The duration is the time deadline within which the animation should complete. The third argument is easing, which is the type of animation desired and includes options like swing (default, gives accelerated effect), linear (constant effect), easeOutBounce (Bouncing effect). In callback we can define what we need to do once the animation is over.
So the complete function looks like this :

$('#div-id').animate({height:100px;width:100px},2000,'linear',function(){});

The code

Below are some demos :

Bounce Effect :


Linear Effect :


Magnet Effect :