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
<html>
<head>
<title>Work In Progress</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>>
<script type="text/javascript">
//By TJ
$(function(){
var x,y,limitx,limity,color,current=0;
limitx = $(window).width()-100; //the horizontal limit minus box width
limity = $(window).height()-100; // the vertical limit minus box height
function animatetop(){ //bounce the box on upper wall
if(current==1){animatebottom();return;} //don't allow subsequent bounce on same wall
x=Math.floor(Math.random()*limitx); //upper wall coordinates
y=0;
color = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')'; //generate random color, requires jquery ui
$("#box").animate({top: y,left: x,backgroundColor: color},3000,'linear',function(){});
current=1;
}
function animatebottom(){ //bounce the box on lower wall
if(current==2){animatetop();return;}
x=Math.floor(Math.random()*limitx);
y=Math.floor(limity);
color = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
$("#box").animate({top: y,left: x,backgroundColor: color},3000,'linear',function(){});
current=2;
}
function animateleft(){ //bounce the box on left wall
if(current==3){animateright();return;}
x=0;
y=Math.floor(Math.random()*limity);
color = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
$("#box").animate({top: y,left: x,backgroundColor: color},3000,'linear',function(){});
current=3;
}
function animateright(){ //bounce the box on right wall
if(current==4){animateleft();return;}
x=Math.floor(limitx);
y=Math.floor(Math.random()*limity);
color = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
$("#box").animate({top: y,left: x,backgroundColor: color},3000,'linear',function(){});
current=4;
}
function animate(){
var random_num=Math.floor(Math.random()*4);
switch(random_num){
case 0: animatetop();
setTimeout(animate,3000); // next animation after 3 seconds
break;
case 1: animatebottom();
setTimeout(animate,3000)
break;
case 2: animateleft();
setTimeout(animate,3000)
break;
case 3: animateright();
setTimeout(animate,3000)
break;
default: animate();
break;
}
}
animate(); //Starting point
});
</script>
<style>
body{
overflow:hidden;
background:url('test.jpg');
}
#launch-date{
padding-top:250px;
font-size:20px;
text-align:center;
color:white;
}
#not-available{
font-size:20px;
text-align:center;
color:white;
}
#box {
width:100;
height:100;
background:#dddddd;
position:absolute;
z-index:-1000;
}
</style>
</head>
<body>
<div id="box"></div>
<div id="launch-date">Bouncing Box</div>
<div id="not-available">Using JQuery</div>
</body>
</html>
Bounce Effect :
Linear Effect :
Magnet Effect :
No comments:
Post a Comment