Beranda › Javascript › Tutorial

Javascript Tutorial

Cara membuat Javascript Gambar bertaburan di Blog

Cara membuat Javascript Gambar bertaburan di Blog

Ali Hyuuga Senin, April 27, 2020 Komentar Edit

Javascript Hujan Gambar - Ok bossku kali ini Admin mau share satu javascript lanka lagi. Setelah kemarin Admin share Javascript Hujan Salju dan Javascript Cursor Followers, kurang afdol rasanya bila tidak share javascript yang satu ini.

Admin bakal ngasih dua Cara mudah membuat javascript hujan gambar di Blog. pertama dengan secript mentahan yang bisa kita edit, yang kedua dengan memanggilnya langsung menggunakan kode HTML/Javascript.

br Untuk cara yang pertama silahkan Copy dulu scriptnya dibawah, dan seperti biasa Paste kan scriptnya di kolom HTML/Javascript.

<script type="text/javascript">
 // Link gambar
  var snowsrc="http://planetwap.yn.lt/js/img/songoku.gif";
        // Jumlah gambar
     var no = 1;
 // Gambar menghilang (0=never):
        var hidesnowtime = "0";
        // Gambar memudar ("windowheight" or "pageheight")
     var snowdistance = "pageheight";
   
////////////////Stop Config//////////////////
   
     var ie4up = (document.all) ? 1 : 0;
     var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
   
    function iecompattest(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }
   
     var dx, xp, yp;    // coordinate and position variables
     var am, stx, sty;  // amplitude and step variables
     var i, doc_width = 800, doc_height = 600; 
     
     if (ns6up) {
    doc_width = self.innerWidth;
    doc_height = self.innerHeight;
     } else if (ie4up) {
    doc_width = iecompattest().clientWidth;
    doc_height = iecompattest().clientHeight;
     }
   
     dx = new Array();
     xp = new Array();
     yp = new Array();
     am = new Array();
     stx = new Array();
     sty = new Array();
     snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc
     for (i = 0; i < no; ++ i) {  
    dx[i] = 0;                        // set coordinate variables
    xp[i] = Math.random()*(doc_width-50);  // set position variables
    yp[i] = Math.random()*doc_height;
    am[i] = Math.random()*20;         // set amplitude variables
    stx[i] = 0.02 + Math.random()/10; // set step variables
    sty[i] = 0.7 + Math.random();     // set step variables
     if (ie4up||ns6up) {
      if (i == 0) {
     document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src="+snowsrc+" border=\"0\"><\/a><\/div>");
      } else {
     document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src="+snowsrc+" border=\"0\"><\/div>");
      }
    }
     }
   
     function snowIE_NS6() {  // IE and NS6 main animation function
    doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
     doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")?  iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
    for (i = 0; i < no; ++ i) {  // iterate for every dot
      yp[i] += sty[i];
      if (yp[i] > doc_height-50) {
     xp[i] = Math.random()*(doc_width-am[i]-30);
     yp[i] = 0;
     stx[i] = 0.02 + Math.random()/10;
     sty[i] = 0.7 + Math.random();
      }
      dx[i] += stx[i];
      document.getElementById("dot"+i).style.top=yp[i]+"px";
      document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";  
    }
    snowtimer=setTimeout("snowIE_NS6()", 10);
     }
   
    function hidesnow(){
     if (window.snowtimer) clearTimeout(snowtimer)
     for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
    }
     
   
   if (ie4up||ns6up){
    snowIE_NS6();
     if (hidesnowtime>0)
     setTimeout("hidesnow()", hidesnowtime*1000)
     }
</script>

Perhatikan:
• var snowsrc="#"; Ganti tanda # dengan URL gambar sobat, usahakan Resolusi 50×50 pixel kebawah serta background yang transparan agar hasilnya tetap ringan dan tidak menghalangi
• var no = 1; Ini adalah jumlah gambar yang akan ditampilkan.
• (0=never): var hidesnowtime = "0"; Disini untuk mengatur Apakah gambar akan menghilang setelah beberapa detik.
• ("windowheight" or "pageheight") var snowdistance = "pageheight"; Fungsinya untuk mengatur berapa gambar yang harus diturunkan sebelum memudar.

Untuk cara yang kedua kita memanggil kodenya langsung di kolom HTML/Javascript. Copy scriptnya disini.

Untuk mengganti gambar nya sobat tinggal ganti saja goku.js dengan kode dibawah, Admin ada beberapa koleksi Javascript Hujan Gambar yang bisa sobat Coba.

• butterfly.js
• eagle.js
• goku.js
• heart.js
• helicopter.js
• naruto.js
• sakura.js
• sonic.js
• spiderman.js
• star.js
• superman.js
• swordman.js

Nah,, berikut Cara mudah membuat Javascript Gambar betaburan di Blog. Semoga artikel ini bermanfaat dan mohon maaf bila ada kesalahan. Selamat mencoba...

Hanya seorang blogger pemula yang selalu ingin tau

Belum ada Komentar

Posting Komentar

• Berkomentarlah dengan bijak
• Link aktif lebih dari satu termasuk SPAM
• No Rasis No Anarkis No Pornografi
• Thank you so much for you

Langganan: Posting Komentar (Atom)