Memberikan Efek Transisi Pada Gambar Postingan
Snippet Tips Blogger
Bagi sobat yang ingin memasangnya, caranya cukup mudah. Silakan ikuti Tips Blogger pertama dari Arlina Code di awal tahun 2019 ini.
Memberikan Efek Pada Gambar Postingan
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>
.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>
//<![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 memberikan efek pada gambar postingan, sobat juga bisa memodifikasi dan memberikan 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>
.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>
//<![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<s+g.top:a.top>=0&&a.top<s,v=l?a.bottom-g.top>0&&a.bottom<=s+g.top:a.bottom>0&&a.bottom<=s,d=l?a.left-g.left>=0&&a.left<p+g.left:a.left>=0&&a.left<p,m=l?a.right-g.left>0&&a.right<p+g.left: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 Cara Memberikan Efek Transisi Pada Gambar Postingan. Semoga bisa menjawab permintaan sobat blogger dan wassalam.