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.

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.

Surya Seorang mahasiswa yang senang membagikan informasi yang sudah saya dapatkan. Informasi yang saya tulis blog ini, sesuai pengalaman saya dari pertama blog.

Berbagi :