Memberikan Dampak Transisi Pada Gambar Postingan

Sesuai permintaan, kali ini akan membuatkan tips cara Memberikan Efek Transisi Pada Gambar Postingan. Cara kerjanya hampir sama ibarat pada postingan Mempercepat Loading Blog dengan Lazy Load AdSense, yaitu konten akan muncul ketika kita menggulirkan halaman ke bawah.

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

Memberikan Efek Pada Gambar Postingan

Seperti biasa, buka halaman Blogger > Klik sajian Tema dan klik tombol Edit HTML > Tambahkan arahan 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 memakai imbas transisi lain, teman dapat buka link ini Daftar Efek CSS Transform atau CSS Animation

Selanjutnya tambahkan arahan 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 menawarkan imbas pada gambar postingan, teman juga dapat memodifikasi dan menawarkan imbas pada bab lain pada sebuah template. Tinggal dikreasikan kembali sesuai kebutuhan, misalnya ibarat ini.

• Result

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

Tambahkan arahan 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 arahan 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 arahan yang ditandai, berarti class module ialah bab yang ingin diberi efek.

Contohnya kalau ingin menggunakannya pada bab postingan, cukup tambahkan class module ke dalam markup postingan :

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

• Result

Sekian untuk Cara Memberikan Efek Transisi Pada Gambar Postingan. Semoga dapat menjawab seruan teman blogger dan wassalam.

Tweet

Subscribe to receive free email updates: