Cara Membuat Efek Salju di Html Dengan JavaScript

Cara membuat efek salju di HTML dengan Java Script

Kali ini Saya bakal share tutor membuat efek salju pada HTML.Kali aja bergua untuk membuat script HTML kalian jadi lebih keren :).

Ok tanpa banyak basi basi langsung saja saya kasih kode Java Scriptnya ea gan.

========================================================================

<script>

var snowmax=50

var snowcolor=new Array("aqua","purple","white")

var snowtype=new Array("Arial Black","Arial Narrow","Times","Comic Sans MS")

var snowletter="*"

var sinkspeed=0.6

var snowmaxsize=22

var snowminsize=30

var snowingzone=3

var snow=new Array()

var marginbottom

var marginright

var timer

var i_snow=0

var x_mv=new Array();

var crds=new Array();

var lftrght=new Array();

var browserinfos=navigator.userAgent 

var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)

var ns6=document.getElementById&&!document.all

var opera=browserinfos.match(/Opera/)  

var browserok=ie5||ns6||opera

function randommaker(range) {        

    rand=Math.floor(range*Math.random())

    return rand

}

function initsnow() {

    if (ie5 || opera) {

        marginbottom = document.body.clientHeight

        marginright = document.body.clientWidth

    }

    else if (ns6) {

        marginbottom = window.innerHeight

        marginright = window.innerWidth

    }

    var snowsizerange=snowmaxsize-snowminsize

    for (i=0;i<=snowmax;i++) {

        crds[i] = 0;                      

        lftrght[i] = Math.random()*15;         

        x_mv[i] = 0.03 + Math.random()/10;

        snow[i]=document.getElementById("s"+i)

        snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)]

        snow[i].size=randommaker(snowsizerange)+snowminsize

        snow[i].style.fontSize=snow[i].size

        snow[i].style.color=snowcolor[randommaker(snowcolor.length)]

        snow[i].sink=sinkspeed*snow[i].size/5

        if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}

        if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}

        if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}

        if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}

        snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size)

        snow[i].style.left=snow[i].posx

        snow[i].style.top=snow[i].posy

    }

    movesnow()

}

function movesnow() {

    for (i=0;i<=snowmax;i++) {

        crds[i] += x_mv[i];

        snow[i].posy+=snow[i].sink

        snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i]);

        snow[i].style.top=snow[i].posy

        

        if (snow[i].posy>=marginbottom-2*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){

            if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}

            if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}

            if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}

            if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}

            snow[i].posy=0

        }

    }

    var timer=setTimeout("movesnow()",50)

}

for (i=0;i<=snowmax;i++) {

    document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>")

}

if (browserok) {

    window.onload=initsnow

}

</script>

========================================================================

Note:
var sinkspeed=0.6 ( kecepatan snow bergerak kalo bisa jangan lebih dari satu gan )
var snowmaxsize=22 ( maximal besar snow )
var snowminsize=10 ( ini jumlah besar saljunya.Silahkan diganti sesuai selera tapi jangan terlalu besar nanti anu gan )
var snowcolor=new Array("aqua","purple","White")
( ini buat warna snownya ada tiga warna tuh silahkan ganti,tapi saran saya sih gak usah diganti karena itu dah default warna snow.. )

Hasilnya :)

Sekian Tutor Dari Saya Terimakasih :)