Menambahkan Efek Transisi Pada Setiap Gambar Postingan Blog

Kali ini JENTSUU TV akan berbagi tutorial cara Menambahkan Efek Transisi Pada Setiap Gambar Postingan Blog. Cara kerjanya hampir sama seperti pada postingan Mempercepat Loading Blog dengan Lazy Load AdSense, yaitu konten akan muncul saat kita menggulirkan halaman ke bawah.

Bagi sobat yang ingin memasangnya, caranya cukup mudah. Silakan ikuti Tips Blogger pertama dari JENTSUU TV di awal tahun 2019 ini.

Menambahkan Efek Transisi Pada Setiap Gambar Postingan Blog

Seperti biasa, buka halaman Blogger > Klik menu Tema dan klik tombol Edit HTML > Tambahkan kode CSS 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>

Bagi yang ingin menggunakan efek transisi lain, sobat bisa buka link ini Daftar Efek CSS Transform atau CSS Animation

Selanjutnya tambahkan kode berikut 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>

Setelah itu klik tombol Simpan tema dan selesai.

• Result

Tidak hanya sebatas untuk menambahkan efek pada gambar postingan, sobat juga bisa memodifikasi dan menambahkan efek pada bagian lain pada sebuah template. Tinggal dikreasikan kembali sesuai kebutuhan, contohnya seperti ini.

• Result

Dan versi ini sedikit berbeda, efek transisi akan tetap berjalan saat menggulirkan halaman ke atas dan ke bawah.

Tambahkan kode CSS ini sebelum </head>

<style type='text/css'>
.come-in{perspective:200px;animation:hago 0.8s ease forwards}
.already-visible{left:0;animation:none}
@keyframes hago{from{opacity:.5;transform:scale(0.8)}to{opacity:1;transform:scale(1.0)}}
</style>

Selanjutnya tambahkan kode berikut sebelum </body>

<script type='text/javascript'>
//<![CDATA[
// Transition
!function(t){var o=t(window);t.fn.visible=function(i,e,r,f){if(!(this.length<1)){r=r||"both";var n=this.length>1?this.eq(0):this,l=void 0!==f&&null!==f,h=l?t(f):o,g=l?h.position():0,u=n.get(0),p=h.outerWidth(),s=h.outerHeight(),b=!0!==e||u.offsetWidth*u.offsetHeight;if("function"==typeof u.getBoundingClientRect){var a=u.getBoundingClientRect(),c=l?a.top-g.top>=0&&a.top=0&&a.top0&&a.bottom<=s+g.top:a.bottom>0&&a.bottom<=s,d=l?a.left-g.left>=0&&a.left=0&&a.left0&&a.right0&&a.right<=p,w=i?c||v:c&&v,y=i?d||m:d&&m;w=a.top<0&&a.bottom>s||w,y=a.left<0&&a.right>p||y;if("both"===r)return b&&w&&y;if("vertical"===r)return b&&w;if("horizontal"===r)return b&&y}else{var z=l?0:g,B=z+s,C=h.scrollLeft(),H=C+p,R=n.position(),W=R.top,j=W+n.height(),q=R.left,L=q+n.width(),Q=!0===i?j:W,k=!0===i?W:j,x=!0===i?L:q,A=!0===i?q:L;if("both"===r)return!!b&&k<=B&&Q>=z&&A<=H&&x>=C;if("vertical"===r)return!!b&&k<=B&&Q>=z;if("horizontal"===r)return!!b&&A<=H&&x>=C}}}}(jQuery);
// Transition Option
var win=$(window),allMods=$(".module");allMods.each(function(l,i){$(i).visible(!0)&&$(i).addClass("already-visible")}),win.scroll(function(l){allMods.each(function(l,i){(i=$(i)).visible(!0)?i.addClass("come-in"):i.removeClass("come-in already-visible")})});
//]]>
</script>

Perhatikan kode yang ditandai, berarti class module adalah bagian yang ingin diberi efek.

Contohnya jika ingin menggunakannya pada bagian postingan, cukup tambahkan class module ke dalam markup postingan :

<div class='main-wrapper'>
  <div id='post' class='post module'></div>
</div>

• Result

Sekian untuk Menambahkan Efek Transisi Pada Setiap Gambar Postingan Blog. Semoga bisa menjawab permintaan sobat blogger dan Salam Bahagia.