Cara Mudah Membuat Efek (Goyang) Shake Gambar di Blog Keren

Apakah anda seorang blogger aktif menulis dan mengelola themplate blog sendiri ? jika benar, anda pasti sering oprek-oprek script html dan css di blog sendiri bukan ? selain mempercantik tampilan blog, bisa juga memberikan interaksi kepada pengunjung saat berkunjung di blog anda. banyak animasi yang bisa anda gunakan salah satunya properties css 3 yaitu animation shake.

Animasi shake atau goyang-goyang ini bisa anda terapkan di semua element html, tetapi lebih bagusnya anda gunakan untuk element image (gambar). animasi ini telah banyak di gunakan oleh blog populer untuk menarik pengunjung lebih berinteraksi dengan gambar.

Apakah Loading Blog Akan Menjadi Lambat ?

Tenang saja teman, animasi ini tidak akan menjadikan blog anda menjadi lambat saat membukanya. tetapi tidak boleh juga menggunakan properties animasi lagi agar blog menjadi lambat. sebenarnya css3 bisa membuat lambat loading, jika anda pandai menggunakannya secara efektif di blog aman saja.

Beda hal lagi dengan memasang script javascript sudah jelas memakan loading blog, karena ada script javascript yang di kelola di suatu tempat, lalu di pindahkan ke blog anda. sehingga membutuhkan koneksi loading blog menjadi lambat. saya sarankan gunakan javascript seperlunya saja.

Berikut  Cara Membuat Semua Gambar Menjadi Goyang-Goyang (Shake) Di Blog

1. Login ke blogger anda, lalu masuk ke menu edit HTML, selanjutnya cari ]]></b:skin> dengan cara Ctrl + F.
2. Setelah ketemu ]]></b:skin>. salin dan letakkan script css, tepat di atas kode ]]></b:skin>, lalu simpan theme.

.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); } 
}

3. Lihat hasilnya di setiap artikel ini, pasti akan bergoyang-goyang saat anda meletakkan kursor mouse di atas gambar blog.
4. Selesai.

Apakah CSS Menyediakan Animasion Shake Saja ?

Sekaranga properties css sudah hampir ratusan animasi yang bisa anda gunakan di blog dan cara penggunannya bisa anda lihat di W3School. untuk melihat animasi dan impelentasi langsung bisa kunjungi situs CSS Animasion.

Kesimpulan

Tutorial ini sudah saya praktekan dan hasilnya berhasil shake gambar dengan keren. kenapa saya tidak menggunakan animasi shake ini ? karena saya kurang menyukai goyang gambar di blog sendiri, tergantung juga setiap orang berbeda beda kesukaannya.

Surya Seorang mahasiswa yang senang membagikan informasi yang sudah saya dapatkan. Informasi yang saya tulis blog ini, sesuai pengalaman saya dari pertama blog.

Berbagi :