Cara Membuat Efek Bergoyang Pada Gambar Postingan Blog Ketika Disentuh

Selamat datang kembali di Santos Blog. Mungkin anda sekalian pernah menjumpai di beberapa blog, ketika menyentuh gambar postingan, tiba-tiba saja gambar tersebut bergerak-gerak seakan geli oleh sentuhan mouse atau jari jemari tangan anda. Atau dengan istilah lain, gambar tersebut juga seakan tiba-tiba bergoyang mengikuti irama setelah anda mencoleknya. Nah, kali ini kita akan coba belajar membuat efek seperti itu (goyang) pada gambar postingan blog ketika gambar tersebut disentuh. 

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 (baca: Cara menambahkan tag alt dan title pada gambar postingan). Dan agar lebih menarik lagi, tidak ada salahnya juga anda tambahkan efek bergoyang pada gambar tersebut biar pengunjung terhibur dan terkesima. 

Jangan khawatir, cara membuat efek goyang pada gambar postingan ini hanya menggunakan kode CSS sehingga tidak akan begitu mempengaruhi kecepatan loading blog anda. Jika berminat memasangnya, silahkan ikuti langkah-langkah berikut ini:

1. Buka akun blogger anda. 

2. Pilih menu thema dan klik edit html. 

3. Cari kode ]]></b:skin> atau </style> dan letakkan kode berikut ini di atasnya. 

.post-body img:hover {

animation: bergoyang 0.8s;

animation-iteration-count: infinite;

}

@keyframes bergoyang {

0% { transform: translate(1px, 1px) rotate(0deg); }

10% { transform: translate(-1px, -2px) rotate(-1deg); }

20% { transform: translate(-3px, 0px) rotate(1deg); }

30% { transform: translate(3px, 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(3px, 1px) rotate(-1deg); }

80% { transform: translate(-1px, -1px) rotate(1deg); }

90% { transform: translate(1px, 2px) rotate(0deg); }

100% { transform: translate(1px, -2px) rotate(-1deg); }

4. Simpan kembali template anda. 

Silahkan anda bisa melihat hasilnya. Gambar-gambar di dalam postingan pun kini akan bergoyang ketika tersentuh oleh mouse (via PC/ laptop) atau jari jemari (via smartphone) pembacanya. 

Demikianlah pembahasan artikel kali ini tentang cara membuat efek bergoyang atau bergerak atau bergetar pada gambar postingan. Semoga bermanfaat.

Lokasi:

Berbagi :