Postingan kali ini sebenarnya cuman memperbaiki tutorial sebelumnya mengenai
tranparansi gambar menggunakan CSS Opacity. Kok memperbaiki, emang ada yang
salah ya? sejujurnya gak ada kok, masalahnya hanya pada tampilan di
browser..dimana CSS opacity ternyata kurang begitu berjalan dengan baik
pada beberapa browser versi jadul, salah satunya di IE6. Selain itu efek animasi
yang ditampilkan juga kurang begitu mantap dan terlihat kasar. Nah sayang
banget tuh punya efek animasi gambar yang ok tapi gak support di browser lawas,
untuk itu kali ini saya coba mengenalkan efek animasi yang lain menggunakan
Opacity via jQuery.

Efek blur tranparansi yang ditampilkan menggunakan Opacity jQuery
ternyata lebih halus jika dibanding dengan Opacity CSS, dan sepertinya
juga support di semua browser, asalkan pada browsernya tetap mengaktifkan Enable
Javascript lho ya hehehe. Untuk melihat contoh efek gambar yang dihasilkan
jQuery silahkan langsung aja ke Blog baru saya
Free Blogger Templates
Gallery.
OK, langsung ke tutorial saja ya...
Buka halaman Edit HTML kemudian letakan script dibawah ini di bawah kode
]]>
Contoh manual memasang efeknya pada gambar :
class="efekanimasi"
src="url alamat gambar"/>
Sebenarnya ada cara lain yang lebih mudah dimana kita bisa langsung
mengaktifkan efek gambar ini disemua image pada halaman posting. Caranya, copy
paste aja script dibawah ini, dan letakan saja dibawah kode
]]> atau dibawah script yang sudah
kita masukan sebelumnya.
Good Luck :)
No comments:
Post a Comment