Cara Memasang Efek Transisi Pada Gambar Postingan Blog - Mediaachmad

Mediaachmad.com - Cara memasang Efek transisi pada gambar postingan saat blog di scroll. Halo kembali lagi dengan mediaachmad, kali ini mediaachmad akan memberikan sebuah tutorial bagaimana cara memasang Efek Transisi pada gambar postingan, cara kerjanya jadi saat sobat menyescroll ke bawah dan menemukan sebuah gambar, maka gambar tersebut akan muncul dengan efek transisi seperti Fade In.

Cara memasangnya juga cukup mudah. Sobat bisa memasang fitur ini dengan tujuan untuk mempercantik tampilan website dengan efek fade in. Oke langsung saja silakan simak tutorial dibawah ini.

Cara memasang Efek transisi pada gambar Postingan saat blog di scroll

1. Pertama silakan sobat login ke Blogger, masuk ke TEMA kemudian pilih EDIT HTML. Dan masukan kode dibawah ini Tepat di ATAS kode </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>

2. Kemudian masukan kode JS berikut di ATAS kode </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>

3. Klik Simpan Tema, Selesai sekarang lihat hasilnya.

Ada terdapat beberapa versi untuk efek transisi, cara di atas menggunakan efek trannsisi Fade in. lalu bagaimana cara memberikan 2 efek sekaligus Efek Fade in dan Efek Fade Out di Gambar Postingan? Oke Simak tutorial berikut.

1. Pertama, Sobat masuk ke Blogger – TEMA – EDIT HTML, lalu masukan kode dibawah ini di ATAS kode </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>

2. Kemudian masukan kode berikut, Letakkan di ATAS kode </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>

Silakan sobat simak dibagian yang di tandai .module, itu adalah bagian yang akan diberi efek Fade in dan Fade Out, Jika sobat ingin menggunakan di Bagian postingan, Silakan tambahkan Class module di Markup Postingan. Simak dibawah ini.

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

3. Simpan Tema, Selesai dan sekarang lihat hasilnya.

Mungkin itu yang dapat mediaachmad sampaikan tentang Cara memasang Efek Transisi pada Gambar saat Blog di Scroll, semoga dapat bermanfaat sekian dan terima kasih.