Macromedia Dreamweaver MX: Membuat Efek Salju dengan JavaScript

Blogging Business Editorial Gadget Games General Highlight Humour Internet Mailbox Opinion Tips&Tricks Tutorial

Macromedia Dreamweaver MX: Membuat Efek Salju dengan JavaScript

Terbit 26.12.2006. Edisi Dec 2006. Sudah ada 6 Komentar.

Yoki Dhinata

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:

PLAIN TEXT

JavaScript:

function lib2bwcheck(){
this.ver=navigator.appVersion;
this.agent=navigator.userAgent;
this.dom=document.getElementById?1:0;
this.opera5=this.agent.indexOf(”Opera 5″)>-1;
this.ie5=(this.ver.indexOf(”MSIE 5″)>-1 && this.dom && !this.opera5)?1:0;
this.ie6=(this.ver.indexOf(”MSIE 6″)>-1 && this.dom && !this.opera5)?1:0;
this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
this.ie=this.ie4||this.ie5||this.ie6;
this.mac=this.agent.indexOf(”Mac”)>-1;
this.ns6=(this.dom && parseInt(this.ver)>= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5);
return this;
}
var bw=new lib2bwcheck()
var px = bw.ns4||window.opera?”":”px”;
function run() {
var css, obj, nest, ooo;
if ((document.all) && (!bw.opera5)) {
movy = document.body.clientHeight-64;
movx = document.body.clientWidth-50;
} else {
movx = window.innerWidth-50;
movy = window.innerHeight-64;
}
for (var i=0; i
if (ds[i]<=0) {
sx[i] = Math.round(Math.random()*(sxto-sxfrom)+sxfrom);
sy[i] = Math.round(Math.random()*(syto-syfrom)+syfrom);
ds[i] = Math.round(Math.random()*(sdto-sdfrom)+sdfrom);
}
ox[i]+=sx[i]; if (ox[i]>movx) ox[i]=0; if (ox[i]<0) ox[i] = movx;
oy[i]+=sy[i]; if (oy[i]>movy) oy[i]=0; if (oy[i]<0) oy[i] = movy;
ds[i]–;
if (bw.ns4) {
ooo = eval(”document.s”+i);
ooo.moveTo(ox[i], oy[i]);
} else {
obj = “s”+i; nest=”";
css= bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+”document.layers.” +obj):0;
css.left = ox[i]; css.top = oy[i];
}
}
setTimeout(”run()”,tpause,”JavaScript”);
}
var maxitems=25;
var sxfrom=-2;
var sxto=2;
var syfrom=1;
var syto=3;
var sdfrom=4;
var sdto=10;
var pcol=Number(16777215).toString(16);
var tpause=20;
var schar=”.”;
var fontface = 1;
var fontsize = “6″;
if (fontface==0) fontface = ‘Arial, Helvetica, sans-serif’;
else if (fontface==1) fontface = ‘Times New Roman, serif’;
else if (fontface==2) fontface = ‘Courier New, Courier, mono’;
else if (fontface==3) fontface = ‘Georgia, Times New Roman, Times, serif’;
else fontface = ‘Verdana, Arial, Helvetica, sans-serif’;
var t=0;
t = pcol.length;
for (var i=0; i<6-t; i++) pcol = ‘0′+pcol;
if (sxfrom>sxto) { t=sxto; sxto=sxfrom; sxfrom=t; }
if (syfrom>syto) { t=syto; syto=syfrom; syfrom=t; }
if (sdfrom>sdto) { t=sdto; sdto=sdfrom; sdfrom=t; }
if ((document.all) && (!bw.opera5)) {
movy = document.body.clientHeight-64;
movx = document.body.clientWidth-50;
} else {
movx = window.innerWidth-50;
movy = window.innerHeight-64;
}
ox = new Array();
oy = new Array();
sx = new Array();
sy = new Array();
ds = new Array();
pa = new Array();
for (var i=0; i
if (bw.ns4) document.writeln(””);
else document.writeln(”
<p id="’s”+i+”‘">”);
document.writeln(’<span style="color: #00c000;">’+schar+’</span>’);
if (bw.ns4) document.writeln(””);
else { document.writeln(”
”); }
ox[i] = Math.round(Math.random()*movx);
oy[i] = Math.round(Math.random()*movy);
ds[i] = 0;
}
setTimeout(”run()”,tpause,”JavaScript”);

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).

Menyisipkan tag baru pada file HTML.

Sekarang yang harus Anda lakukan adalah menyisipkan tag baru kedalam halaman Web yang ingin diberi efek salju. Sisipkan tag ini:

<SCRIPT language="JavaScript" src="jssnow.js">

</SCRIPT>

Anda dapat menyisipkan tag tersebut di antara tag

<body> </body>

Sebagai catatan file jssnow.js yang Anda buat harus berada dalam satu folder bersama dengan file html yang diberi efek salju. Satu hal lagi agar efek salju terlihat dengan jelas gunakan background yang berwarna gelap.