Postingan tentang "Membuat Animasi Gambar saat Disorot dengan Mouse" sebenarnya sama dengan postingan saya tentang cara membuat gambar menjadi blur ketika disorot mouse (Baca: Cara Membuat Effk Blur pada Gambar )



Ada perbedaan yang tipis antara effek animasi gambar dengan effek blur, yaitu, pada effek blur, jika gambar disorot dengan mouse, maka secara cepat gambar akan nge-blur, sedangkan pada effek animasi, jika gambar disorot dengan mouse, maka secara perlahan-lahan warna gambar akan nge-blur.

Contoh untuk gambar dengan effek blur --------- -> Klik di sini

Contoh untuuk gambar dengan effek animasi ------> Klik di sini

Perbedaan yang lain antara effek blur pada gambar dengan effek animasi adalah, jika pada effek blur, gambar akan terlihat lebih kasar, tapi pada effek animasi gambar terlihat lebih halus.









Langsung ke tutorialnya saja ya ^^

• Masuk ke blogger


• Buka Design/Rancangan


• Pilih Edit HTML 


• Lalu cari kode ]]></b:skin> (Gunakan Ctrl+F)


• Setelah ketemu, letakkan kode berikut setelah kode ]]></b:skin>

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>

<script type='text/javascript'>

$(document).ready(function(){

$(&quot;.efekanimasi&quot;).fadeTo(&quot;slow&quot;, 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads

$(&quot;.efekanimasi&quot;).hover(function(){

$(this).fadeTo(&quot;slow&quot;, 0.6); // This should set the opacity to 100% on hover

},function(){

$(this).fadeTo(&quot;slow&quot;, 1.0); // This should set the opacity back to 30% on mouseout

});

});

</script>

• Lalu simpan 

Langkah menyettingnya sudah selesai, sekarang tutorial cara membuatnya,



Jika Sobat hendak membuat gambar dengan effek animasi tersebut pada halaman post, maka caranya seperti ini,



Masuk ke halaman post ,lalu pilih pada Edit HTML bukan Compose, dan masukkan kode gambar berikut

<img class="efekanimasi" src="Url Gambar"/>

Atau, cara lain, tanpa pengaturan saat posting, dengan kata lain semua gambar akan dibuat effek animasi. Caranya, tambahkan kode berikut di bawah kode ]]></b:skin> atau di bawah script yang sudah kita masukan sebelumnya.

<script type='text/javascript'>

$(document).ready(function(){

$(&quot;.post img&quot;).fadeTo(&quot;slow&quot;, 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads

$(&quot;.post img&quot;).hover(function(){

$(this).fadeTo(&quot;slow&quot;, 0.6); // This should set the opacity to 100% on hover

},function(){

$(this).fadeTo(&quot;slow&quot;, 1.0); // This should set the opacity back to 30% on mouseout

});

});

</script>

Semoga tips ini bisa bermanfaat buat anda pengguna dan pecinta bloger dengan tips dari Karya Anak Kidoel....!!!!!!