Javascript : Membuat Animasi Salju

Pernahkah Anda melihat animasi salju? Pada beberapa website tertentu dapat kita lihat animasi salju yang cukup menarik untuk di lihat apalagi kalau bisa kita terapkan pada website sendiri. berikut langkah – langkah membuat animasi salju secara sederhana.

Kopikan kode berikut antara “<head>” dan “</head>”

<style type=”text/css”>

.snow {
position:absolute;
layer-background-color:lightblue;
visibility:visible;
top:-50px;
font-size:1px;
background-color:lightblue; //Warna salju
}

</style>

Kopikan kode berikut antara “<body>” dan </body>”

<script language=”javascript”>

var snowflakes=50; //Jumlah objek yang Anda inginkan
var level=2; //Tingkat kecepatan 1 to 5. 1 = Lambat, 5 = Cepat

var w3c=(document.getElementById)?true:false;
var ns4=(document.layers)?true:false;
var ie4=(document.all && !w3c)?true:false;
var ie5=(document.all && w3c)?true:false;
var ns6=(w3c && navigator.appName.indexOf(“Netscape”)>=0)?true:false;
var t=”;
var w_x, w_y;
var snow=new Array();
for(i=1;i<=snowflakes;i++)t+='<div id=”snow’+i+'” class=”snow”></div>’;
document.write(t);

function getstartpos(obj){
obj.size=Math.floor(Math.random()*5)+1
obj.ystep=obj.size*level;
obj.xstep=obj.ystep/5;
if(ns4)obj.clip.width=obj.clip.height=obj.size;
else obj.style.width=obj.style.height=obj.size;
moveidto(obj,Math.floor(Math.random()*w_x)-obj.size,0);
}

function movedrop(){
for(i=1;i<=snowflakes;i++){
var l=(ns4)?snow[i].left:parseInt(snow[i].style.left);
var t=(ns4)?snow[i].top:parseInt(snow[i].style.top);
var pxo=(ie4||ie5)?document.body.scrollLeft:pageXOffset;
var pyo=(ie4||ie5)?document.body.scrollTop:pageYOffset;
if( (t+snow[i].ystep+snow[i].size>=w_y+pyo) || (snow[i].xpos-snow[i].size<pxo)) getstartpos(snow[i]);
else moveidto(snow[i], l-snow[i].xstep, t+snow[i].ystep);
}}

function getwindowdims(){
w_x=(ie4||ie5)? document.body.clientWidth:window.innerWidth;
w_y=(ie4||ie5)? document.body.clientHeight:window.innerHeight;
}

function moveidto(id,x,y){
if(ns4)id.moveTo(x,y);
else{
id.style.left=x+’px’;
id.style.top=y+’px’;
}}

window.onresize=function(){
if(ns4)setTimeout(‘history.go(0)’,400);
else getwindowdims();
}

window.onload=function(){
level=Math.max(Math.min(5,level),1)
getwindowdims();
for(i=1;i<=snowflakes;i++){
snow[i]=(ns4)?document.layers[‘snow’+i]:(ie4)?document.all[‘snow’+i]:document.getElementById(‘snow’+i);
getstartpos(snow[i]);
moveidto(snow[i],Math.floor(Math.random()*(w_x-10)),Math.floor(Math.random()*(w_y-10)));
}
setInterval(‘movedrop()’,50);
}
</script>

Selamat Mencoba…

greencow.se

%d bloggers like this: