Membuat Effect Salju Dengan Dreamweaver

Saat berselancar didunia maya kita sering terhibur dengan situs yang memiliki tampilan dan efek-efek yang unik. Dengan adanya teknologi Java suatu halaman Web dapat diberi efek-efek tertentu dan dapat menampilkan sesuatu misalnya menampilkan jam pada halaman dan mengucapkan salam saat halaman di-load oleh browser. Kali ini kita akan membuat efek salju dengan menggunakan JavaScript. Langkah-langkah yang yang harus Anda lakukan untuk membuatnya adalah:

Membuat file javascript (*.js)

1. Jalankan Dreamweaver MX klik [Start]>[Programs]>[Macromedia]>[Macromedia Dreamweaver MX 2004].

2. Pada kotak Category: pilih [ Basic page ].

3. Pada kotak Basic page: pilih [ JavaScript ].

4. Jika sudah, klik [ Create ].

5. Akan muncul workspace dengan tampilan Code.

6. Ketikkan script di bawah ini:

<JavaScript:<br /><br /> 1.<br /> function lib2bwcheck(){<br /> 2.<br /> this.ver=navigator.appVersion;<br /> 3.<br /> this.agent=navigator.userAgent;<br /> 4.<br /> this.dom=document.getElementById?1:0;<br /> 5.<br /> this.opera5=this.agent.indexOf(”Opera 5″)>-1;<br /> 6.<br /> this.ie5=(this.ver.indexOf(”MSIE 5″)>-1 && this.dom && !this.opera5)?1:0;<br /> 7.<br /> this.ie6=(this.ver.indexOf(”MSIE 6″)>-1 && this.dom && !this.opera5)?1:0;<br /> 8.<br /> this.ie4=(document.all && !this.dom && !this.opera5)?1:0;<br /> 9.<br /> this.ie=this.ie4||this.ie5||this.ie6;<br /> 10.<br /> this.mac=this.agent.indexOf(”Mac”)>-1;<br /> 11.<br /> this.ns6=(this.dom && parseInt(this.ver)>= 5) ?1:0;<br /> 12.<br /> this.ns4=(document.layers && !this.dom)?1:0;<br /> 13.<br /> this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5);<br /> 14.<br /> return this;<br /> 15.<br /> }<br /> 16.<br /> var bw=new lib2bwcheck()<br /> 17.<br /> var px = bw.ns4||window.opera?”":”px”;<br /> 18.<br /> function run() {<br /> 19.<br /> var css, obj, nest, ooo;<br /> 20.<br /> if ((document.all) && (!bw.opera5)) {<br /> 21.<br /> movy = document.body.clientHeight-64;<br /> 22.<br /> movx = document.body.clientWidth-50;<br /> 23.<br /> } else {<br /> 24.<br /> movx = window.innerWidth-50;<br /> 25.<br /> movy = window.innerHeight-64;<br /> 26.<br /> }<br /> 27.<br /> for (var i=0; i<br /> 28.<br /> if (ds[i]<=0) {<br /> 29.<br /> sx[i] = Math.round(Math.random()*(sxto-sxfrom)+sxfrom);<br /> 30.<br /> sy[i] = Math.round(Math.random()*(syto-syfrom)+syfrom);<br /> 31.<br /> ds[i] = Math.round(Math.random()*(sdto-sdfrom)+sdfrom);<br /> 32.<br /> }<br /> 33.<br /> ox[i]+=sx[i]; if (ox[i]>movx) ox[i]=0; if (ox[i]<0) ox[i] = movx;<br /> 34.<br /> oy[i]+=sy[i]; if (oy[i]>movy) oy[i]=0; if (oy[i]<0) oy[i] = movy;<br /> 35.<br /> ds[i]–;<br /> 36.<br /> if (bw.ns4) {<br /> 37.<br /> ooo = eval(”document.s”+i);<br /> 38.<br /> ooo.moveTo(ox[i], oy[i]);<br /> 39.<br /> } else {<br /> 40.<br /> obj = “s”+i; nest=”";<br /> 41.<br /> css= bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+”document.layers.” +obj):0;<br /> 42.<br /> css.left = ox[i]; css.top = oy[i];<br /> 43.<br /> }<br /> 44.<br /> }<br /> 45.<br /> setTimeout(”run()”,tpause,”JavaScript”);<br /> 46.<br /> }<br /> 47.<br /> <br /> 48.<br /> var maxitems=25;<br /> 49.<br /> var sxfrom=-2;<br /> 50.<br /> var sxto=2;<br /> 51.<br /> var syfrom=1;<br /> 52.<br /> var syto=3;<br /> 53.<br /> var sdfrom=4;<br /> 54.<br /> var sdto=10;<br /> 55.<br /> var pcol=Number(16777215).toString(16);<br /> 56.<br /> var tpause=20;<br /> 57.<br /> var schar=”.”;<br /> 58.<br /> <br /> 59.<br /> var fontface = 1;<br /> 60.<br /> var fontsize = “6″;<br /> 61.<br /> if (fontface==0) fontface = ‘Arial, Helvetica, sans-serif’;<br /> 62.<br /> else if (fontface==1) fontface = ‘Times New Roman, serif’;<br /> 63.<br /> else if (fontface==2) fontface = ‘Courier New, Courier, mono’;<br /> 64.<br /> else if (fontface==3) fontface = ‘Georgia, Times New Roman, Times, serif’;<br /> 65.<br /> else fontface = ‘Verdana, Arial, Helvetica, sans-serif’;<br /> 66.<br /> <br /> 67.<br /> var t=0;<br /> 68.<br /> <br /> 69.<br /> t = pcol.length;<br /> 70.<br /> for (var i=0; i<6-t; i++) pcol = ‘0′+pcol;<br /> 71.<br /> <br /> 72.<br /> if (sxfrom>sxto) { t=sxto; sxto=sxfrom; sxfrom=t; }<br /> 73.<br /> if (syfrom>syto) { t=syto; syto=syfrom; syfrom=t; }<br /> 74.<br /> if (sdfrom>sdto) { t=sdto; sdto=sdfrom; sdfrom=t; }<br /> 75.<br /> <br /> 76.<br /> if ((document.all) && (!bw.opera5)) {<br /> 77.<br /> movy = document.body.clientHeight-64;<br /> 78.<br /> movx = document.body.clientWidth-50;<br /> 79.<br /> } else {<br /> 80.<br /> movx = window.innerWidth-50;<br /> 81.<br /> movy = window.innerHeight-64;<br /> 82.<br /> }<br /> 83.<br /> <br /> 84.<br /> ox = new Array();<br /> 85.<br /> oy = new Array();<br /> 86.<br /> sx = new Array();<br /> 87.<br /> sy = new Array();<br /> 88.<br /> ds = new Array();<br /> 89.<br /> pa = new Array();<br /> 90.<br /> <br /> 91.<br /> for (var i=0; i<br /> 92.<br /> if (bw.ns4) document.writeln(””);<br /> 93.<br /> else document.writeln(”<br /> 94.<br /> <p id="’s”+i+”‘">”);<br /> 95.<br /> document.writeln(’<span style="color: #00c000;">’+schar+’</span>’);<br /> 96.<br /> if (bw.ns4) document.writeln(””);<br /> 97.<br /> else { document.writeln(”<br /> 98.<br /> <br /> 99.<br /> ”); }<br /> 100.<br /> ox[i] = Math.round(Math.random()*movx);<br /> 101.<br /> oy[i] = Math.round(Math.random()*movy);<br /> 102.<br /> ds[i] = 0;<br /> 103.<br /> }<br /> 104.<br /> <br /> 105.<br /> setTimeout(”run()”,tpause,”JavaScript”);<br />

Perhatikan tag var maxitems=25; maksudnya adalah jumlah salju yang turun dibatasi tidak lebih dari 25 karakter. Anda dapat mengganti jumlah tersebut sesuai keinginan Anda. Perhatikan juga tag var schar=”.”;. Anda dapat mengganti karakter [.] dengan karakter lain misal dengan [*]. Tapi karena ini adalah efek salju lebih cocok kalau yang ditampilkan adalah [.] atau [*] bukan karakter yang lain.

8. Jika sudah simpan file tersebut beri nama jssnow dan tipenya JavaScript Documents (*.js).