Cara Memberi Efek Transisi Gambar Artikel Keren

mengasihkan efek transisi untuk gambar postingan - apakah anda pernah melihat di website/blog orang saat anda menggulir postingannya, gambar artikel itu muncul tiba-tiba membesar. dari efek 0 (Nol) transisi menjadi 100 transisi, alias dari gambar paling kecil sampai gambar terbesar di tampilkan.
apakah anda pernah melihat di website/blog orang saat anda menggulir postingannya, gambar artikel itu muncul tiba-tiba membesar. dari efek 0 (Nol) transisi menjadi 100 transisi, alias dari gambar paling kecil sampai gambar terbesar di tampilkan.

efek transisi ini berfungsi untuk meringankan loading artikel anda dan blog anda menjadi elegant. menggunakan efek transisi, juga ramah untuk mata pengunjung saat men scroll artikel.

Cara Menerapkan Efek Transisi Pada Postingan
1. Blogger > Theme > Edit HTML.
2. Cari code </head>, lalu salin code di bawah ini, sebelum </head>
<b:if cond='data:blog.pageType != &quot;index&quot;'>
<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>
3. Salin code di bawah ini, sebelum </body>
<b:if cond='data:blog.pageType != &quot;index&quot;'>
<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>
</b:if>
4. Simpan themplate anda.

Demikianlah cara memberi efek transisi pada postingan gambar. semoga bermanfaat untuk anda.

Berlangganan update artikel terbaru via email:

Belum ada Komentar untuk "Cara Memberi Efek Transisi Gambar Artikel Keren"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel