Pernahkah anda melihat sebuah halaman website yang bergambar, ketika gambar tersebut diarahkan oleh mouse atau penunjuk, maka gambar tersebut spontan bergetar atau bergoyang. Bagi yang gemar dalam suasana efek tentu saja hal ini sangat menarik dan perlu untuk dicoba.
Setelah mencoba untuk browsing, ternyata hal ini cukup memerlukan beberapa script CSS yang perlu anda tambahkan pada Setingan Tema dan edit HTML Blogger anda.
Kali ini pembahasannya untuk flatform Blogger ya, bagi yang menggunakan flatform lainnya, silahkan menyesuaikan saja.
Cara Membuat Efek Gambar Bergoyang Pada Blog
Baiklah mari kita sama-sama ikuti langkah demi langkahnya.
- Masuk ke Blogger anda
- Pilih menu Tema
- Edit HTML
- Cari kode ]]></b:skin>:
- Tempel kode berikut ini diatasnya
.post-body img {display:inherit;transform-origin:center center}
img:hover img {animation-play-state:running}
@keyframes img {
20% {transform: translate(-1px, -5px) rotate(2.5deg)}
40% {transform: translate(5px, 1px) rotate(-2.5deg)}
60% {transform: translate(-1px, -5px) rotate(2.5deg)}
80% {transform: translate(5px, 1px) rotate(-2.5deg)}
0%, 100% {transform: translate(0, 0) rotate(0)}
}
img:hover {animation-name:img;animation-duration:0.5s;animation-timing-function:ease-in-out}
Sangat mudah bukan,
Script CSS diatas sudah bisa langsung digunakan dan otomatis berfungsi terhadap gambar-gambar yang pernah diposting sebelumnya tanpa harus melakukan pemanggilan script terlebih dahulu. Jadi, Anda tidak susah-susah lagi mengedit setiap gambar yang akan diberikan efek bergoyang ketika membuat sebuah posting.
Tetapi bagi yang seleranya manual, atau kostumisasi yaitu hanya ingin memberikan efek bergoyang pada gambar tertentu, silahkan ganti script di atas dengan script berikut.
.lotus {display:inherit;transform-origin:center center}
.lotus:hover .ferisp {animation-play-state:running}
@keyframes .ferisp {
20% {transform: translate(-1px, -5px) rotate(2.5deg)}
40% {transform: translate(5px, 1px) rotate(-2.5deg)}
60% {transform: translate(-1px, -5px) rotate(2.5deg)}
80% {transform: translate(5px, 1px) rotate(-2.5deg)}
0%, 100% {transform: translate(0, 0) rotate(0)}
}
.lotus:hover {animation-name:img;animation-duration:0.5s;animation-timing-function:ease-in-out}Hal yang harus diingat bahwa ketika membuat posting, atau menyisipkan gambar, maka perlu pemanggilan script/atribut berikut ini class="lotus" disetiap gambar yang diinginkan
Lebih jelasnya perhatikan contoh HTML berikut ini
<img class="lotus" alt="#" data-original-height="#" data-original-width="#" src="#" title="#" />
Anda hanya dianjurkan memasang salah satu Script saja, hal ini untuk menghindari error atau bentrok pada tema utama Bloger anda.
Demikian Cara Membuat Efek Gambar Bergoyang Pada Blog semoga bermanfaat.
