Efek Shake Pada Gambar

Ada yang pernah dengar shake ? Shake paling sering didengar saat kita membuat minuman yang dikocok seperti membuat Pop ice ( maybe ).

Kali ini kita akan belajar membuat efek gambar yang di shake, jadi gambar itu akan bergerak seperti saat membuat Pop ice. ayo kita pergi......



Follow this tutorial :
1. Masuk ke Blogger.com
2. Login di blogger
3. Rancangan > Edit HTML

Di firefox tekan CTRL+F lalu cari " ]]></b:skin> ". Lalu ganti dengan kode ini :

.shakeimage{ position:relative }
]]></b:skin>


cari " </head> ". Lalu ganti dengan kode ini :

<script language="JavaScript1.2">
//<![CDATA[
//configure shake degree (where larger # equals greater shake) var rector=3
///////DONE EDITTING/////////// var stopit=0 var a=1 function init(which){ stopit=0 shake=which shake.style.left=0 shake.style.top=0 } function rattleimage(){ if ((!document.all&&!document.getElementById)||stopit==1) return if (a==1){ shake.style.top=parseInt(shake.style.top)+rector+"px" } else if (a==2){ shake.style.left=parseInt(shake.style.left)+rector+"px" } else if (a==3){ shake.style.top=parseInt(shake.style.top)-rector+"px" } else{ shake.style.left=parseInt(shake.style.left)-rector+"px" } if (a<4) a++ else a=1 setTimeout("rattleimage()",50) } function stoprattle(which){ stopit=1 which.style.left=0 which.style.top=0 }
//]]>
</script>
</head>

4. Simpan TEMPALTE
5. Menampilkan Gambar

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk1dt480dd2mn4nXniOeVi8EMKVmo_VGX3e-oC-F0ZeoUQbCu3GcILvHylbIOn71L-EWlcQaAc_mFIhX4E3sBwWCAnS5j-Upn_lnbcfNgbkhc9KgW8z_2axvRJVi2Ca9dDsyrRKIKzU8BQ/s1600/Image3.gif%3C/font>" class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);top.focus()" onClick="top.focus()"/>


Keterangan :
  1. Ganti kode warna merah dengan url gambar kamu
  2. Kode warna hijau adalah cara untuk membuat gambar memiliki efek shake

Diterbitkan Oleh Fuad Muhtaz »
Kategori » Home » Efek Shake Pada Gambar » ,

ARTIKEL TERKAIT

Dari komentar menjadi inspirasi

Swedish Greys - a WordPress theme from Nordic Themepark. Converted by LiteThemes.com.