Sesuai permintaan, kali ini akan menyebarkan tips cara Memberikan Efek Transisi Pada Gambar Postingan. Cara kerjanya hampir sama menyerupai 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 hidangan Tema dan klik tombol Edit HTML > Tambahkan isyarat 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 memakai imbas transisi lain, teman dapat buka link ini Daftar Efek CSS Transform atau CSS Animation
Selanjutnya tambahkan isyarat 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 memperlihatkan imbas pada gambar postingan, teman juga dapat memodifikasi dan memperlihatkan imbas pada bab lain pada sebuah template. Tinggal dikreasikan kembali sesuai kebutuhan, misalnya menyerupai ini.
Dan versi ini sedikit berbeda, imbas transisi akan tetap berjalan ketika menggulirkan halaman ke atas dan ke bawah.
Tambahkan isyarat 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 isyarat 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 isyarat yang ditandai, berarti class module ialah bab yang ingin diberi efek.
Contohnya jikalau 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>Sekian untuk Cara Memberikan Efek Transisi Pada Gambar Postingan. Semoga dapat menjawab usul teman blogger dan wassalam.