Membuat animasi efek bergetar pada gambar saat di sentuh / hover

Cara membuat gambar bergetar saat di sentuh / hover (Animasi Effect Image Shake) Saat kalian mengunjungi situs web atau blog pasti pernah melihat sebuah gambar yang jika kita klik atau kita arahkan kursor pada gambar maka gambar tersebut akan bereaksi mengeluarkan efek bergetar seperti contoh gambar diatas dan dibawah artikel ini. efek tersebut tidaklah default tertanamam pada template kita melainkan harus kita tanamkan sendiri efek tersebut pada template yang kita gunakan, kecuali kamu menggunakan template mod yang sudah ditanamkan skrip tersebut.

Keuntungannya setelah kita memasang efek tersebut ?,,, keuntungan nya ya mungkin kamu akan merasa keren ajh dengan tampilan blog kamu atau bahkan pengunjung blog kamu juga bisa merasakan seperti apa yang kamu rasakan karena melihat keunikan blog kamu sehingga pengunjung tersebut merasa nyaman saat berada di blog kamu, intinya selain mempercantik tampilan blog efex animasi ini tidak menguntungkan (menurut saya pribadi).

Nah jika kamu memang berniat untuk memasang efek animasi tersebut pada setiap gambar yang ada pada blog kamu silahkan simak tutorial singkat berikut ini.

Cara Menambahkan Animasi Gambar Bergetar

Langkah-langkahnya cukup sederhana yaitu kamu hanya perlu menambahkan beberapa css kedalam template yang kamu gunakan, caranya sebagai berikut:

• Pertama buka dashboard blogger kamu lalu klik opsi Tema.
• Pada opsi tema klik tanda panah kebawah lalu pilih Edit HTML.
• Kemudian cari tag berikut </head>
• Jika sudah ketemu silahkan salin skrip berikut.
  
  

  CSS / doble click to select

  <style>img:hover {animation: shake 0.5s;animation-iteration-count: infinite;}@keyframes shake {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); }} </style>
  
  Lalu Tempelkan skrip css tersebut diatas tag </head> tadi.
• Kemudian simpan template dan lihat hasilnya.

Dengan begitu sekarang gambar di blog / website kamu akan bergetar ketika gambar tersorot kursor atau saat di sentuh seperti contoh gambar dibawah ini.

Dan demikianlah tutorial kali ini tentang cara membuat efek animasi gambar bergerak saat dihover. semoga artikel ini bisa bermanfaat buat kamu dan pengunjung lainnya, jika masih ada yang kurang jelas dalam pembahasan di atas jangan sungkan untuk bertanya di kolom komentar yang tersedia dibawah. sampai ketemu lagi di artikel menarik lainnya.