Cara Menunda Kemunculan Gambar di Dalam Postingan

memberikan efek transisi pada gambar postingan

Dengan menunda kemunculan gambar yang ada di dalam postingan akan membuat loading blog anda semakin cepat, terutama pada halaman postingam. Jadi disini gambar postingan akan muncul ketika pengunjung sudah menscroll halaman tersebut. Atau bisa di sebut juga dengan membuat efek transisi pada gambar postingan.


Cara kerja efek transisi pada gambar ini sama dengan cara kerja pada postingan mempercepat loading blog dengan Lazy load adsense. Yaitu konten akan muncul ketika pengunjung mulai menggulir halaman kebawah. Dengan kata lain gambar di dalam postingan akan di tunda kemunculannya sampai pengunjung mulai mengscroll halaman kebawah.

Memberikan Efek Pada Gambar Postingan


Pertama Masuk ke menu edit HTML di dalam akun blogger anda, tambahkan css berikut sebelum kode </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>


Selanjutnya Tambahkan CSS dibawah ini sebelum kode </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>


Terakhir klik simpan tema. Nah cukup simple bukan membuat efek pada gambar postingan.

Berlangganan update artikel terbaru via email:

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel