Cara Menambahkan Efek Transisi, Shake, Zoom Pada Gambar Postingan

Keberadaan gambar di dalam postingan memang cukup penting dalam mendukung kekuatan konten agar pembahasan semakin kaya dan mudah dipahami. Pada umumnya, pembaca juga akan jenuh ketika membaca sebuah postingan yang panjang menjalar, namun minim gambar atau bahkan tidak ada gambar ilustrasinya sama sekali. Selain bikin ngantuk, ketiadaan ilustrasi gambar juga bisa membuat pengunjung malas untuk membacanya.

Oleh karenanya, maksimalkan setiap postingan anda dengan selalu menyertakan gambar di dalamnya. Memang keberadaan gambar bisa mempengaruhi kecepatan loading blog anda. Namun jika anda bisa mengelolanya dengan baik (termasuk dengan mengkompresnya agar file menjadi semakin kecil), bukan tidak mungkin pengunjung akan banyak berdatangan menuju blog anda karena gambar-gambar tersebut. Agar lebih menarik lagi, tidak ada salahnya juga anda tambahkan beberapa efek pada gambar tersebut biar pengunjung terhibur dan terkesima.

Kali ini Admin akan membagikan tips cara memberikan efek pada gambar postingan. Beberapa efek ini dapat memperindah tampilan postingan blog Sobat SD seperti beberapa fitur efek yang akan saya berikan kali ini diantaranya :

A. Efek Gambar Transisi

Efek ini cara kerjanya sama seperti menggunakan lazy load yang akan berfungsi saat menggeser scroolbar kebawah. Kode script ini telah saya coba buat pada template viomagz, linkmagz dan jettheme dan berhasil. Untuk pengguna template jettheme ubah yang diberi tanda highlight menjadi (#post-body). Bagi Sobat SD yang ingin menambah efek transisi pada gambar postingannya, silahkan ikuti cara berikut :

1. Masukkan script dibawah ini pada bagian atas atau sebelum </head>.

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<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>

2. Setelah itu tambahkan script dibawah ini dibagian atas atau sebelum </body>.

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<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>

B. Efek Gambar Bergoyang (Shake)

Selain efek gambar transisi diatas, Sobat SD juga dapat mencoba efek yang satu ini yaitu efek gambar bergoyang. Efek ini akan muncul pada saat cursor mouse berada pada gambar. Untuk pengguna template VioMagz, Linkmagz dan JetTheme dapat menggunakannya karena sudah di coba dan berhasil. Untuk membuat efek ini, masukkan script dibawah ini pada bagian atas atau sebelum ]]></b:skin>. Untuk pengguna template JetTheme ubah yang diberi tanda higlight diganti dengan menggunakan (#post-body).

.post-body a img{box-shadow: 0px 0x 6px rgba(0, 0, 0, 0, 5);
border-radius:10px;}
.post-body a img:hover{
animation:sobatsdShake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform:translate3d(0, 0, 0);
backface-visibility:hidden;
perspective:1000px}
@keyframes sobatsdShake{
10%,90%{transform:translate3d(-1px,0,0)}
20%,80%{transform:translate3d(2px,0,0)}
30%,50%,70%{transform:translate3d(-4px,0,0)}
40%,60%{transform:translate3d(4px, 0, 0)}}
@-webkit-keyframes ignielShake{
10%,90%{transform:translate3d(-1px,0,0)}
20%,80%{transform:translate3d(2px,0,0)}
30%,50%,70%{transform:translate3d(-4px,0,0)}
40%,60%{transform:translate3d(4px,0,0)}}

Demo Efek

C. Efek Gambar Membesar (Zoom)

Efek yang satu ini untuk memberikan gambar efek membesar ketika kursor mouse berada diatas gambar. Fitur ini sudah dicoba diterapkan pada template JetTheme. Untuk pengguna template JetTheme, masukkan script dibawah ini pada bagian atas atau sebelum ]]></b:skin>. Untuk demo tampilan silahkan buka salah satu postingan di blog ini.

#post-body a img:hover { -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -moz-transform: scale(1.3); -webkit-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); }

Nah Sobat SD, diatas telah Admin berikan beberapa fitur memberi efek pada gambar postingan. Fitur efek tersebut sudah di coba ke template VioMagz v4.6.0 dan LinkMagz v3.0.0 serta template JetTheme v2.8.2. Semoga bermanfaat, wassalam.