cara membuat animasi efek gambar bergetar saat disentuh cursor (image shake)

Cara membuat efek gambar bergetar saat disentuh cursor (image shake) - membuat gambar bergetar diblog saat di hover,bisa sobat lakukan untuk menambah tampilan halaman blog menjadi lebih menarik dan terlihat profesional

tapi jujur entah kenapa,masih banyak diluar sana yang belum membuat tutorial "cara membuat gambar menjadi bergetar atau bergoyang"

padahal sebetulnya sudah banyak blog blog terkenal yang membuat gambar mereka menjadi bergetar jika di sentuh kursor,contohnya aja seperti blognya mba Igniel.com

jika sobat sudah sering berkunjung di blognya igniel.com,tentunya sobat akan menemui sebuah gaya tarik tersendiri,yaitu ketika sobat mengarahkan cursor ke salah satu gambarnya mba igniel,maka gambar tersebut akan bergetar atau bergoyang

nah,efek animasi pada gambar itulah yang disebut efek goyang shake gambar atau image shake

Tapi sebelum lanjut membuat animasi efek gambar bergetar,apa sih keuntungan image shake ini?

Berikut Keuntungan membuat image shake di dalam blog

• Tentunya akan menambah nilai daya tarik tersendiri pada blog sobat
• membuat pengunjung akan betah berlama lama di blog
• membuat ciri khas tersendiri dan berdampak blog sobat akan mudah di ingat pengunjung
• blog terlihat lebih profesional jika menggunakan animasi gambar bergoyang
• selain tampak profesional,blog juga akan terlihat keren dan unik,namun tidak akan menurunkan nilai SEO dan kecepatan loading blog

"Wah,keren dong kalau gitu?"

iya,karena selain membuat konten yang berkualitas,kita juga harus membuat pengunjung merasa nyaman dan betah.lagian,menambah efek gambar ini juga tidak memberatkan loading blog,karena yang dipakai hanya CSS,bukan Javascript

"Kok pengunjung bisa betah jika menggunakan animasi efek goyang shake gambar"

Jelas,wajar kan jika pengunjung akan betah jika blog terlihat unik? apalagi jika pengunjung tidak sengaja menyentuh dan mengarahkan cursor ke gambar,alhasil,pastinya mereka akan mencoba untuk menyentuhkan cursor ke gambar untuk kedua kalinya,atau berkali kali

setidaknya membuat pengunjung menjadi asyik sendiri pada postingan sobat

oke,kemudian bagaimana cara buat efek image shake bergetar ini? simak tutorial dibawah

cara membuat animasi efek gambar bergetar

untuk membuat animasi shake pada gambar pada blog,kita cukup menambahkan beberapa CSS dalam Html blog,berikut caranya :

• Masuk ke Dashboard blogger
• pilih menu Tema disebelah kiri,kemudian pilih edit Html
• pada kolom Html,silahkan cari kode </head>
• kemudian,salin semua kode Css dibawah untuk membuat animasi efek gambar bergetar dan letakkan tepat DIATAS kode </head> 

<style>
    /* animasi efek gambar bergetar by alimumedia */ 
    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>

• kemudian simpan atau save Html

Nah sudah deh cara membuat animasi efek bergetar di gambar,hanya cukup menambahkan CSS ringan ini,dijamin pengunjung bakalan nyaman dan betah berlama lama di blog, sobat

Tapi tunggu dulu,saya rasa sobat masih ragu membuat efek bergetar di gambar ini,mungkin beberapa FAQ dibawah ini bisa membantu apa yang sobat rasakan

Pertanyaan Umum

1.Apakah Kode untuk membuat animasi efek shake image akan membuat lambat loading Blog?

Tidak,tidak akan memberikan pengaruh buruk sedikitpun,membuat animasi efek gambar bergetar ini hanya menggunakan CSS,dan jika sobat lihat,kodenya juga sudah saya minify atau diperkecil,sehingga tidak akan membuat lambat loading blog

2.Jika sudah memasang efek image shake ini,bagaimana DEMO nya?

untuk demo,silahkan klik disini dan coba liat apa yang terjadi pada gambar disana? jika gambar jadi bergetar,maka seperti itulah demonya

3.Apakah efek image shake ini hanya akan membuat tampilan blog tidak menarik?

tentu saja tidak,seperti yang sudah dijelaskan di atas,bahkan sebaliknya,efek gambar bergoyang ini akan menambah keunikan blog sobat sendiri

4.Bagaimana efek gambar  ini akan berfungsi ?

efek shake akan berfungsi jika di sentuh cursor,sehingga apabila cursor mouse di arahkan pada gambar,ini akan membuat animasi efek bergetar pada gambar akan berkerja

5.Apakah gambar juga akan bergetar jika disentuh dengan jari di hp atau mobile?

Iya,gambar juga akan bergetar jika disentuh dengan jari,namun perlu diketahui bahwa efek bergetar akan hilang jika gambar tidak disentuh

6.Jika memang membuat efek shake membuat blog lebih menarik,apakah ada buktinya?

Ada,salah satu blog terkenal yang juga memakai animasi pada image shake adalah blognya mbak igniel,sobat bisa cek dan kunjungi langsung blog nya (https://www.igniel.com/)

7.apakah ada kode khusus yang dimasukkan ketika akan membuat artikel?

tidak ada,cukup memasukan kode diatas,tidak perlu menambahkan kode apa apa,cukup masukan gambar seperti biasa,simple kan?

8.terakhir..apakah kode membuat animasi efek gambar bergetar di blog boleh dishare dan dibagikan?

tentu,bahkan sangat disarankan untuk membagikan cara ini,namun ingat juga ya sob,jangan lupa untuk memberikan sumbernya juga,setidaknya sobat telah membantu berkembangnya blog ini

Oke,gimana sekarang?

saya rasa beberapa pertanyaan di atas sudah membantu keragu raguan sobat,percaya aja deh! CSS tidak akan membuat lambat blog sobat,apalagi juga sudah di perkecil

kalau masih belum yakin,gini aja,coba cek kecepatan blog ini di (https://developers.google.com/speed/pagespeed/insights/)

mungkin hasilnya akan berubah ubah,tapi barusan saya cek page speed nya paling rendah 96! sudah diatas rata rata

oke sob,sekian dulu tutorial cara membuat animasi efek gambar bergetar saat disentuh cursor (image shake),semoga bermanfaat dan berhasil,jika masih ada keraguan yang ingin ditanyakan,silahkan tanyakan di kolom komentar

always trying,praying and creative