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 != "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>
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 != "index"'>
<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.
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.
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.left
0&&a.right
0&&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>
Sekian untuk Menambahkan Efek Transisi Pada Setiap Gambar Postingan Blog. Semoga bisa menjawab permintaan sobat blogger dan Salam Bahagia.