search-button

Feb 9, 2014

Cara Membuat Efek Bergoyang Pada Gambar Posting Blog

   
Advertisements
Advertisements
Sebelumnya anda mungkin sudah mencoba memasang efek zoom otomatis pada semua gambar posting blog. Nah kali ini saya akan membuat efek shake atau efek bergoyang yang di implementasikan didalam gambar kiriman blogspot tanpa ada tambahan mark up apapun dan hanya menggunakan efek murni CSS3 yang tidak akan terlalu berpengaruh terhadap beban loading blog anda.

Efek ini akan bekerja pada saat pengunjung melakukan mouse over atau melakukan hover baik itu terhadap gambar yang memiliki anchor link maupun gambar yang tidak memilikinya. Efek shake yang membuat gambar blog anda bergoyang ini akan bekerja pada semua browser seperti IE, Firefox, Chrome, Safari, Opera bahkan saya telah mencoba melakukan hover pada browser di perangkat android dan efek inipun bekerja sangat mulus tanpa ada kendala.
Demo

Efek bergoyang pada gambar blog

Langkah-langkah membuat efek bergoyang pada gambarb di blog:

1) Masuk ke dashboard aku blogger anda
2) Klik Template lalu back up
3) Klik edit tempalte lalu cari kode ]]></b:skin>
4) Salin lalu pastekan semua css dibawah ini tepat diatas kode tersebut

Klik ganda untuk menyalin

.entry-content img { 
transition-duration:0.5s; 
transition-timing-function: ease; 
transition-delay:0s; 
-moz-transition-duration:0.5s; 
-moz-transition-timing-function:ease; 
-moz-transition-delay:0s;  
-webkit-transition-duration:0.5s; 
-webkit-transition-timing-function:ease; 
-webkit-transition-delay:0s; 
-o-transition-duration:0.5s; 
-o-transition-timing-function:ease; 
-o-transition-delay:0s; 
} 
.entry-content img:hover { 
animation-name: goyang; 
animation-duration: 0.8s; 
transform-origin:50% 50%; 
animation-iteration-count: infinite; 
animation-timing-function: linear; 
-moz-animation-name: goyang; 
-moz-animation-duration: 0.8s; 
-moz-transform-origin:50% 50%; 
-moz-animation-iteration-count: infinite; 
-moz-animation-timing-function: linear; 
-webkit-animation-name: goyang; 
-webkit-animation-duration: 0.8s; 
-webkit-transform-origin:50% 50%; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-timing-function: linear; 
} 
@keyframes goyang{ 
0% { transform: translate(2px, 1px) rotate(0deg); } 
10% { transform: translate(-1px, -2px) rotate(-1deg); } 
20% { transform: translate(-3px, 0px) rotate(1deg); } 
30% { transform: translate(0px, 2px) rotate(0deg); } 
40% { transform: translate(1px, -1px) rotate(1deg); } 
50% { transform: translate(-1px, 2px) rotate(-1deg); } 
60% { transform: translate(-3px, 1px) rotate(0deg); } 
70% { transform: translate(2px, 1px) rotate(-1deg); } 
80% { transform: translate(-1px, -1px) rotate(1deg); } 
90% { transform: translate(2px, 2px) rotate(0deg); } 
100% { transform: translate(1px, -2px) rotate(-1deg); } 
} 
@-moz-keyframes goyang{ 
0% { -moz-transform: translate(2px, 1px) rotate(0deg); } 
10% { -moz-transform: translate(-1px, -2px) rotate(-1deg); } 
20% { -moz-transform: translate(-3px, 0px) rotate(1deg); } 
30% { -moz-transform: translate(0px, 2px) rotate(0deg); } 
40% { -moz-transform: translate(1px, -1px) rotate(1deg); } 
50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); } 
60% { -moz-transform: translate(-3px, 1px) rotate(0deg); } 
70% { -moz-transform: translate(2px, 1px) rotate(-1deg); } 
80% { -moz-transform: translate(-1px, -1px) rotate(1deg); } 
90% { -moz-transform: translate(2px, 2px) rotate(0deg); } 
100% { -moz-transform: translate(1px, -2px) rotate(-1deg); } 
} 
@-webkit-keyframes goyang{ 
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); } 
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); } 
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); } 
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); } 
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); } 
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); } 
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); } 
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); } 
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); } 
90% { -webkit-transform: translate(2px, 2px) rotate(0deg); } 
100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); } 
}

5) Klik Simpan

Sekarang coba lihat salah satu posting blog yang terdapat gambar atau foto maka efek bergoyang pun akan mengiringinya pada saat anda melakukan hover. Enjoy & Happy Coding!