2 Efek Transisi Yang Keren Pada Gambar Postingan Blog

Diposting pada

Efek Transisi Yang Keren Untuk Gambar Postingan Blog

2 Efek Transisi Yang Keren Pada Gambar Postingan Blog – Pada artikel kali ini saya ingin berbagai Cara Memberi Efek Transisi Yang Keren Pada Gambar Postingan Blog. Cara kerja efek transisi ini sebenarnya hampir sama seperti pada postingan Lazy Load Adsense Dapat Mempercepat Loading Blog yaitu konten gambar akan muncul saat kita menggulir halaman ke bawah.

Efek Transisi Yang Keren ini saya rasa cukup untuk membuat blog kamu jadi terlihat lebih profesional. Dan tentunya ini tidak membuat blog kamu menjadi berat. Bagi kamu yang ingin mencobanya, silahkan ikuti langkah-langkah nya sebagai berikut.

2 Efek Transisi Yang Keren Pada Gambar Postingan Blog

1. Efek Transisi #1

Silahkan kamu copy kode CSS dibawah ini, lalu letakan kode tersebut di atas kode </head> pada template blog kamu.

 <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>

Lalu tambahkan kode dibawah ini dan letakan kode tersebut di atas kode </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>

Klik Simpan Template dan lihat hasilnya.

DEMO

2. Efek Transisi #2

Di versi ini sedikit berbeda, efek transisi ini akan tetap berjalan saat kamu menggulirkan halaman ke atas maupun kebawah.

Caranya sama seperti di atas, copy kode CSS dibawah ini lalu letakan 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>

Dan tambahkan kode berikut 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>

Perhatikan pada bagian class (“.module“) ini adalah bagian yang ingin diberi efek.

Contohnya bila kamu ingin menggunakannya untuk bagian postingan, kamu cukup tambahkan class module kedalam markup postingan.

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

 

DEMO

Bila efek transisi di atas masih kurang menurut kamu, kamu bisa menggunakan efek transisi lainnya Di Daftra CSS Transform atau CSS Animation.

Dengan begitu kamu juga bisa memodifikasi dan memberikan efek pada bagian lain pada template yang kamu gunakan.

Itulah 2 Efek Transisi Yang Keren Pada Gambar Postingan Blog yang bisa kamu coba. Bila ada pertanyaan menyangkut isi dari artikel di atas, silahkan tinggalkan komentar kamu dibawah. Dan jangan lupa untuk bagikan artikel ini ke teman-teman di Social Media kamu. Selamat Mencoba!

One thought on “2 Efek Transisi Yang Keren Pada Gambar Postingan Blog

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *