Bermain animasi objek berguncang dengan CSS

Saya suka CSS karena dalam beberapa hal ia dapat menggantikan Javascript jika sang 'JS' tidak di perlu perlukan amat dan CSS selalu menjadi pilhan ringan ketika ia di buat untuk memanipulasi tombol 'react' zonanya wilayah JS.

Terlebih lagi CSS dapat menggambar dan bahkan melukiskan banyak hal visual, contohnya dengan CSS kita dapat membuat image bintang, dengan CSS kita dapat membuat sebuah objek seperti gelas, ilustrasi hewan, benar benar murni CSS tanpa perlu insert dan embed URL gambar ke dalam bagian HTML-nya.

Namun disini kita akan membahas bagaimana cara membuat efek guncangan pada suatu objek menggunakan CSS? Baik coba sentuh objek di bawah ini dengan cursor mouse atau dengan sentuh dengan lembut menggunakan jari:


Objek svg di atas menggunakan 'perintah' atau 'pengaturan' CSS sebagai berikut:
svg: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); }
Sedangkan sumber kode CSSnya itu telah saya letakan parmanen di atas kode ]]></b:skin> di dalam template blogger. Dan tentu saja kode tersebut dapat di modifikasi, dialihkan perintahnya. Misalnya jika ingin membuat objek gambar bergerak pada saat di sentuh maka kode 'svg' harus di ganti menjadi 'img'.

Namun kita mengoleksi banyak kode yang sama dengan perintah tidak hanya terbatas terhadap img dan svg tentunya. 
Tentu saja kodenya sama namun harus dengan merobah svg menjadi img, atau membuat class dan ID nya secara unik ke dalam HTML:
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); }

Contoh objek gambar di tulis:


<img src='link gambar'/> 


Sentuh kembali objek gambar berikut: 


Apa gunanya?

Bagi saya guncangan tersebut dapat menarik perhatian pengguna pada saat menyentuh objek, misalnya menu hamburger dan menggiring rasa ingin tahu sebagian pengguna kepada apa yang ingin sampaikan pada saat objek tertentu 'meminta' perhatian.

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share:

2 Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

  1. tips supaya avatar profil bisa joget gitu gimana? lucu juga.

    BalasHapus
    Balasan
    1. Di dalam HTML ada deklarasi class untuk avatar yang dapat di berikan perintah 'menari' melalui pengaturan CSS.

      Untuk pemasangan dari nol silahkan ikuti artikel kami :

      https://www.editblogtema.com/2020/12/cara-meletakan-gambar-profile-penulis.html?m=1

      Avatar itu adalah bawaan setuap template blogger.

      Kami hanya memodifikasi letak dan menambahkan elemen lain seperti animasi.

      Terimakasih telah berkunjung.

      Hapus
Lebih baru Lebih lama

Formulir Kontak