Animation : Animation : GUI Components JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » GUI Components » Animation »

 

Animation



//Snow - http://www.btinternet.com/~kurt.grigg/javascript

/*
Paste this link as the last thing on your page, just before </body></html>

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


To edit, right click on the snow.js file icon and choose edit.

Make sure the snow.js file is in/uploaded to the same directory/folder as 
the web page using it!

*/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<title>Snow</title>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">

<style type="text/css">
<!--
body{
background : #000000;
}
//-->
</style>

</head>
<body>



<script type="text/javascript">
//Snow - http://www.btinternet.com/~kurt.grigg/javascript

if  ((document.getElementById&& 
window.addEventListener || window.attachEvent){

(function(){

//Configure here.

var num = 30;   //Number of flakes
var timer = 30//setTimeout speed. Varies on different comps

//End.

var y = [];
var x = [];
var fall = [];
var theFlakes = [];
var sfs = [];
var step = [];
var currStep = [];
var h,w,r;
var d = document;
var pix = "px";
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var idx = d.getElementsByTagName('div').length;

if (d.documentElement.style && 
typeof d.documentElement.style.MozOpacity == "string")
num = 12;

for (i = 0; i < num; i++){
sfs[i= Math.round(+ Math.random() 1);

document.write('<div id="flake'+(idx+i)+'" style="position:absolute;top:0px;left:0px;width:'
+sfs[i]+'px;height:'+sfs[i]+'px;background-color:#ffffff;font-size:'+sfs[i]+'px"></div>');

currStep[i0;
fall[i(sfs[i== 1)?
Math.round(+ Math.random() 2): Math.round(+ Math.random() 2);
step[i(sfs[i== 1)?
0.05 + Math.random() 0.1 0.05 + Math.random() 0.05 ;
}


if (domWwr = window;
else
  if (d.documentElement && 
  typeof d.documentElement.clientWidth == "number" && 
  d.documentElement.clientWidth != 0)
  r = d.documentElement;
 else
  if (d.body && 
  typeof d.body.clientWidth == "number")
  r = d.body;
 }
}


function winsize(){
var oh,sy,ow,sx,rh,rw;
if (domWw){
  if (d.documentElement && d.defaultView && 
  typeof d.defaultView.scrollMaxY == "number"){
  oh = d.documentElement.offsetHeight;
  sy = d.defaultView.scrollMaxY;
  ow = d.documentElement.offsetWidth;
  sx = d.defaultView.scrollMaxX;
  rh = oh-sy;
  rw = ow-sx;
 }
 else{
  rh = r.innerHeight;
  rw = r.innerWidth;
 }
h = rh - 2;  
w = rw - 2
}
else{
h = r.clientHeight - 2
w = r.clientWidth - 2
}
}


function scrl(yx){
var y,x;
if (domSy){
 y = r.pageYOffset;
 x = r.pageXOffset;
 }
else{
 y = r.scrollTop;
 x = r.scrollLeft;
 }
return (yx == 0)?y:x;
}


function snow(){
var dy,dx;

for (i = 0; i < num; i++){
 dy = fall[i];
 dx = fall[i* Math.cos(currStep[i]);

 y[i]+=dy;
 x[i]+=dx; 

 if (x[i>= w || y[i>= h){
  y[i= -10;
  x[i= Math.round(Math.random() * w);
  fall[i(sfs[i== 1)?
  Math.round(+ Math.random() 2): Math.round(+ Math.random() 2);
  step[i(sfs[i== 1)?
  0.05 + Math.random() 0.1 0.05 + Math.random() 0.05 ;
 }
 
 theFlakes[i].top = y[i+ scrl(0+ pix;
 theFlakes[i].left = x[i+ scrl(1+ pix;

 currStep[i]+=step[i];
}
setTimeout(snow,timer);
}


function init(){
winsize();
for (i = 0; i < num; i++){
 theFlakes[i= document.getElementById("flake"+(idx+i)).style;
 y[i= Math.round(Math.random()*h);
 x[i= Math.round(Math.random()*w);
}
snow();
}


if (window.addEventListener){
 window.addEventListener("resize",winsize,false);
 window.addEventListener("load",init,false);
}  
else if (window.attachEvent){
 window.attachEvent("onresize",winsize);
 window.attachEvent("onload",init);


})();
}//End.
</script>

</body>
</html>

           
       



-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo GUI Components
» Animation