Cara Menambahkan Efek Jiggle Pada Blog

How To Add Jiggle Effects On The Blog

Jiggle Effects adalah sebuah efek yang dapat membuat tulisan, tombol, link, dan sebagainya bergoncang. Efek Goncangan ini biasanya dibuat untuk menarik perhatian visitor pada tulisan, tombol, atau link yang diberikan efek. Untuk previewnya bisa Anda lihat pada result di akhir post.

Baca juga: Membuat Tombol Slide Demo dan Download Keren

Cara Menambahkan Efek Jiggle

1. Copy CSS berikut pada blog sobat. Letakkan sebelum atau di atas kode ]]></b:skin> atau </style>.

.anim {
  animation: jiggle 2s ease-in infinite;
}

@keyframes jiggle {
  48%, 62% {
    transform: scale(1.0, 1.0)
  }
  50% {
    transform: scale(1.1, 0.9)
  }
  56% {
    transform: scale(0.9, 1.1) translate(0, -5px)
  }
  59% {
    transform: scale(1.0, 1.0) translate(0, -3px)
  }
}

2. Gunakan efek jiggle dengan menambahkan atribut "anim" pada kode class. Contohnya seperti kode tombol berikut.

<a class='tombol anim' href='#'>Jiggle</a>

3. Selamat Mencoba

Result

Saya rasa cukup sekian artikel Cara Menambahkan Efek Jiggle Pada Blog. Semoga bisa bermanfaat bagi Anda yang menggunakannya. Sebelum mencoba, ada baiknya untuk meninggalkan komentar Anda terlebih dahulu. Terima Kasih telah membaca artikel di Opick Weblog.

Bagikan Artikel ini