Cara Membuat Efek Gambar Beterbangan

Tutorial ini hanya sekedar selingan tuk melepas kejenuhan
setelah berlama-lama di depan komputer.

Tidak perlu berbanyak kata karena bukan kata yang bisa
membuat Anda mengerti akan maksud dari tutorial ini.

Anda langsung lihat saja contohnya.
Perhatikan gambar yang sesekali melintas ke atas.

Anda mau mencoba ? Mau membuat yang seperti ini?
Ikutilah langkahnya yang berikut ini :

1.   Rancangan -> Tambah Gadget ->
      Pilih HTML/JavaScript.

2.   Masukkan ke dalam kontennya
      kode berikut ini :

<div id="flySpawn" class='spawn'></div>
<script type='text/javascript'>
flyEffect.makeEffect("flySpawn", 24, 12);
flyEffect.makeEffect("flySpawn2", 24, 12);
</script>

3.   Masuk ke Edit HTML

4.   Cari tag </b:skin>

5.   Copy kode yang berikut ini lalu
      letakkan di atas tag tersebut.

.puff {
position: absolute;
left: -70px;
right: 50px;
top: 200px;
bottom: -100px;
}

6.   Cari lagi tag </head>

7.   Copy kode yang berikut ini lalu
      letakkanlah di atas tag tersebut.

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script>

<script type="text/javascript">
var flyEffect = {
 
imgLocation: "https://lh3.googleusercontent.com/-jNjKa-WDLHI/TlBXUusAusI/AAAAAAAABv4/X2lqfk0KJRY/raibow_smoke.png",
flyWidth: 500,
flyHeight: 150,
 
//don't touch this:
flyPos: new Array(),
  
makeEffect: function(id, posX, posY) {
//set position from the "parent"
flyEffect.flyPos[id] = new Array();
flyEffect.flyPos[id]['x'] = posX;
flyEffect.flyPos[id]['y'] = posY;
  
//set a random time to start puffing
var time = (Math.floor(Math.random()*3001));
setTimeout("flyEffect.animate('" + id + "')", time);
},
 
animate: function(id) {

//create the fly cloud
var puff = document.createElement("IMG");
$(puff).attr("src", flyEffect.imgLocation);
$(puff).attr("alt", "puff");
$(puff).attr("class", "puff");
  
//create a temp id for the cloud so we can delete it later on
var tempId = "puff" + Math.floor(Math.random()*1001);
$(puff).attr("id", tempId);
  
//append the cloud to the body
$(document.body).append($(puff));
  
var objPos = $('#' + id).offset();
  
//do fly animation
$(puff).css({
top: (objPos['top'] + flyEffect.flyPos[id]['y']) + "px",
left: (objPos['left'] + flyEffect.flyPos[id]['x']) + "px",
zIndex: 25,
opacity: 0.3
});
$(puff).animate({
width: flyEffect.flyWidth + "px",
height: flyEffect.flyHeight + "px",
marginLeft: "-" + (flyEffect.flyWidth / 2) + "px",
marginTop: "-" + (flyEffect.flyHeight * 1.5) + "px",
opacity: 0.7
},{
duration: 1000
}).animate({
marginTop: "-" + (flyEffect.flyHeight * 3.5) + "px",
opacity: 0.0
},{
duration: 2000
});
  
//create timeout and run the animation again
var time = 1500 + (Math.floor(Math.random()*5001));
  
setTimeout("flyEffect.animate('" + id + "')", time);
  
//remove the old one
setTimeout("$('#" + tempId + "').remove()", 4200);
  
}
}
</script>

KETERANGAN :

Gantilah URL image raibow_smoke yang terdapat
pada kode di atas dengan URL image milik Anda.

Sesuaikan ukuran image Anda pada kode
flyWidth: .........., flyHeight:...........

Selamat mencoba, good luck!