Cara Memberikan Efek Transisi Pada Gambar Postingan
Gerakan gambar tersebut bermacam - macam, ada yang zoom in atau zoom out, ada yang bergerak menyamping, ada pula yang bergetar baru kemudian muncul. Gerakan semacam ini dinamakan efek, sehingga bisa ditentukan bagaimana gambar tersebut tampil kemudian berapa lama waktu sampai gambar tersebut benar - benar tampil secara utuh.
Nah, kali ini saya akan mengulas bagaimana cara memberikan efek transisi pada gambar postingan blog.
Penasaran kan..??? Oke langsung saja kita buat ya....
Cara Memberikan Efek Transisi Pada Gambar Postingan
1. Login ke blogger >> Tema >> Edit Html
2. Tambahkan kode berikut sebelum </head>
<b:if cond='data:blog.pageType != "index"'>
<style type='text/css'>
.imgani .post-body img{opacity:0;transition:all .6s ease;transform:scale(.95) translateY(20px)}.imgani .post-body img.anime{opacity:1;transform:scale(1) translateY(0)}
</style>
</b:if>
NOTE !!! Untuk mengatur waktu efek gambar tadi kalian tinggal merubah .6s, Semakin besar maka kecepatan tampilnya semakin lambat
3. Tambahkan kode berikut sebelum </body>
<script type='text/javascript'>
//<![CDATA[
// Image Transition
var scroll="yes",Fscroll=scroll.replace(/(\r\n|\n|\r)/gm," ");"yes"===Fscroll&&($(document).ready(function(){$("body").addClass("imgani")}),$(window).bind("load resize scroll",function(){var o=$(this).height();$(".post-body img").each(function(){var s=.1*$(this).height()-o+$(this).offset().top;$(document).scrollTop()>s&&$(this).addClass("anime")})}));
//]]>
</script>4. Selesai, kemudian Simpan Tema. Liat blog jika gambar postingan ada efeknya saat di scroll kebawah berarti langkah yang dilakukan berhasil.
Jika masih belum mengerti maka kalian langsung saja ke website sumbernya Arlinadzgn Selamat Mencoba.....
Penutup
Demikian sedikit postingan tentang "Cara Memberikan Efek Transisi Pada Gambar Postingan" Jangan lupa membaca post saya yang lainnya dengan membaca DAFTAR ISI. Semoga postingan ini dapat bermanfaat.