Blog Business Review Gadget Games General Highlight Humour Internet Mailbox Opinion Tips&Tricks Tutorial

Macromedia Dreamweaver MX: Membuat Efek Salju dengan JavaScript



Author: DHINATACOM
Posted: 26.12.2006 at 16:47.
Last Updated: 26.12.2006 at 11:28.
29 Komentar.

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:

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



komentar pembaca DHINATACOM

  1. top bgt says:

    bye good juga tuww infonya,bagi2 lagi donk infonya ttg ini untk mempercantik web…….
    mimpi

  2. Teguh says:

    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:?????

    Tag apa yang disisipkan mas ? capedeh

  3. mirza says:

    kok gk jalan ya?aku dh tes di firefox 3.0…
    mohon dibalas..

  4. neki says:

    huuAAA.. tak jalan… damn

  5. manna says:

    mas dhinata, ga bisa muncul tuh?
    dah q coba di firefox 3.0 n opera 10, maxthon teutep ora iso, piye iki??
    ada yg salah tah scriptnya??? yess

    btw line number 43 n 44 emg gitu ya?? males

  6. zhugo says:

    kok gak mau jalan ya…

  7. Ivan says:

    Mendingan kode salju yang ini

  8. Ivan says:

    Saya sdh coba kode punya Anda tp tdk bs. Kode salju yg sy berikan d atas sy dpt sendiri

  9. lena says:

    cara bikin comment kyk gni gmn c ? please

  10. tempe bacem says:

    kk basic page, dynamic page, template page apa sii??
    ngacir

  11. Ndro says:

    males pas aku copy dari File jssnow dari web contoh,, baru bisa jalan licik

  12. agusta says:

    thank’s ya tas ilmunya…….. recseller

  13. j_8 says:

    :kacau:

  14. aNna says:

    maz kokgak bisa jalan???udah q coba dfirefox 3.6,piye ki maz???
    please blz…..

D . ( . P . diem . piss . kaget . nocomment . malu . mimpi . licik . ide . yess . tipi . tendang . sombong . sinchan . sial . senam . nyerah . ngiler . nggaya . nangis . musik . males . love . konslet . kembar . gatau . damn . bye . ayuk . belajar . tutupkuping . tolong . terharu . strees . serang . sendiri . ngakak . mimisan . mati . mantap . kesel . keren . kartukuning . kartumerah . fiuhhh . cendol . salaman . recseller . maho . marah . najis . kiss . bingung . berduka . takut . ngacir . ngacir2 . janganribut . capedeh .

Petunjuk komentar:
1. Tolong tulis komentar yang berhubungan dengan topik artikel. Jangan mengirim SPAM!
2. Komentar yang tidak berhubungan atau SPAM akan dihapus.
3. Klik gambar emoticon diatas untuk menampilkannya pada komentar Anda.

Catatan: Beberapa emoticon yang ditampilkan merupakan hak cipta dari Kaskus.

home DHINATACOM


Home Article Index Contact Disclaimer F.A.Q


langganan majalah DHINATACOM
home DHINATACOM