Cara Membuat Efek Gambar Bergerak atau Bergoyang di Blog

Cara Membuat Efek Gambar Bergerak atau Bergoyang di Blog

Ferisp.com - Setelah seminggu vakum membuat tulisan di blog, pada kesempatan kali ini, saya akhirnya kembali menulis dan akan memberikan sedikit informasi tentang tutorial cara membuat efek gambar bergerak atau bergoyang di blog.

Mungkin Anda sering berkunjung ke salah satu blog terkenal Indonesia yaitu Igniel.com. Nah, pada template yang digunakan tersebut, Anda pasti pernah melihat efek gambar atau thumbnail yang selalu bergerak dan bergoyang pada saat kursor mouse diarahkan ke gambar tersebut bukan?

Selain sebagai modernisasi fitur blog dari waktu ke waktu, efek tersebut kini sudah banyak digunakan oleh blogger tanah air (mungkin juga luar negeri) sebagai salah satu cara yang digunakan untuk menarik minat para pembaca.

Untuk menggunakan efek tersebut, setidaknya dibutuhkan script CSS yang nantinya akan ditempatkan di bagian HTML template. Setelah itu, Anda hanya perlu memanggil script tersebut agar bisa digunakan sesuai dengan fungsinya.

Daripada panjang lebar untuk memenuhi standar minimal kata wkwk, ikuti langkah-langkah berikut ini:

Cara Membuat Efek Gambar Bergerak atau Bergoyang di Blog

Karena saya menggunakan platform Blogger untuk penulisan, maka tutorial ini akan mengikuti alur berdasarkan sistem Blogger itu sendiri. Bagi Anda yang merupakan pengguna WordPress, silahkan mengikuti tutorial ini dengan tetap mengacu pada langkah di bawah ini:

  • Masuk ke BLOGGER
  • Pilih menu TEMA
  • Pilih ikon tanda panah
  • Pilih EDIT HTML
  • Salin dan paste script berikut ini di atas kode ]]></b:skin>:
.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;}
  • Pilih SIMPAN
  • Selesai.

Script di atas bisa langsung digunakan tanpa harus melakukan pemanggilan script terlebih dahulu. Tanpa pemanggilan tersebut, Anda tidak perlu susah-susah lagi mengedit setiap gambar yang akan diberikan efek bergerak atau bergoyang.

Apabila hanya ingin memberikan efek bergerak atau bergoyang pada gambar tertentu, silahkan ganti script di atas dengan script berikut ini:

.ferisp{
  display: inherit;
  transform-origin: center center; 
}
.ferisp: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); } 
}
.ferisp:hover{
  animation-name: img;
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
}

Catatan

  1. Untuk melakukan pemanggilan efek pada gambar yang diinginkan, tambahkan atribut class="ferisp" di setiap HTML gambar. Contohnya:
<img class="ferisp" alt="#" data-original-height="#" data-original-width="#" src="#" title="#">
  1. Untuk mengubah kecepatan pergerakan, ubah nilai dari kode animation-duration: 0.5s;
  2. Pilih salah satu script di atas sesuai dengan kebutuhan berdasarkan jenis fungsinya. Jangan menggunakan secara bersamaan untuk menghindari bentrok.
  3. Untuk melihat hasil dari dua script di atas, silahkan membuka sampel atau demo berikut ini:

Penutup

Sebagai seorang blogger, sudah sepatutnya memberikan konten tulisan yang terbaik kepada semua pembaca. Jenis tampilan yang terbaik tersebut bisa seperti tulisan yang lengkap dan mendalam, mudah dipahami, atau gambar yang menarik.

Berhubungan dengan topik kali ini yang membahas tentang gambar, maka salah satu contoh yang bisa dilakukan untuk memberikan kualitas konten gambar yang menarik adalah dengan menggunakan efek bergerak atau bergoyang tersebut.

Ingat, gambar menjadi salah satu komponen yang paling banyak menarik minat para pengunjung atau pembaca. Oleh karena itu, penggunaan gambar menjadi salah satu pokok penting yang harus digunakan ke dalam tulisan.