Macromedia Dreamweaver MX: Membuat Efek Salju dengan JavaScript

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.

62 thoughts on “Macromedia Dreamweaver MX: Membuat Efek Salju dengan JavaScript”

  1. We are a bunch of volunteers and opening a brand new scheme in our community.
    Your site offered us with useful info to work on. You have done a formidable
    task and our entire group will probably be thankful to you.

  2. I do consider all of the ideas you have introduced on your post.
    They are really convincing and can definitely work.
    Nonetheless, the posts are very quick for newbies. May you
    please prolong them a bit from next time? Thank you for the post.

  3. I really love your website.. Pleasant colors & theme.

    Did you build this web site yourself? Please reply
    back as I’m looking to create my own personal site and would
    like to find out where you got this from or what the theme is called.
    Appreciate it!

  4. Good day! This is my first comment here so I just wanted to give
    a quick shout out and say I truly enjoy reading through your articles.
    Can you recommend any other blogs/websites/forums that cover the same topics?
    Thanks for your time!

  5. Gra w GTA Online jest mozolna bez teamu, stąd ukrzształtowało się GTA Online Forum.
    To polska grupa graczy wpierających każdy każdego na sesjach
    swobodnyuch GTA 5 Online. Rozmawiamy i wpieramy się na wypadek
    kłpotów z GTA. Dogadujemy się na wyścigi wykorzystjąc
    http://www.gtaforum.pl.

  6. Ӏ don’t create a leave a respоnse, however after looking at some of the
    responses on this page Macromedia Dreаmweɑver ⅯX: Membuat Efeҝ Salju dengan JavаScript | Hacked by FRΚ48 –
    Indonesian Freedom Security. I actᥙally ԁo have sоme queѕtions fоr
    you if it’s allright. Could it ƅe simply me or do а few of the responses
    appear like they are left by brain desd visitors? :-P And, if you are writing on other sites, Iwould like to
    keep up with everythinmg new you hqvе to post.

    Сould you list of tthe complete urls of your social networking sites like youir
    linkedin profile, Ϝacebook ρage or twitter feed?

  7. This design is incredible! You obviously know how to keep a reader
    amused. Between your wit and your videos, I was almost moved
    to start my own blog (well, almost…HaHa!) Fantastic job.
    I really loved what you had to say, and more than that, how you presented it.
    Too cool!

  8. Hello my friend! I wish to say that this post is awesome, great written and include almost
    all important infos. I would like to look extra posts like this .

Leave a Reply

Your email address will not be published. Required fields are marked *