Membuat efek riak menggunakan Jquery

Membuat efek riak menggunakan Jquery

  21 February    Andika

---

Efek yang akan saya bagikan kali ini adalah efek riak yang bisa di aplikasikan pada tombol-tombol tertentu pada blog.

Kamu tentu sudah paham dengan efek riak yang di maksud? Efeknya seperti sebuah tetesan air yang menyentuh genangan air di bawahnya, maka tercipta lah riak. Yah kurang lebih seperti itu lah.

Dari pada belepotan begini, mending langsung ke demonya saja.

Berikut Demonya,

Jquery

Jika sudah menggunakan Jquery, langkah ini bisa dilewati. Jika belum, kamu dapat menggunakannya melalui kode yang ada di bawah ini.

<script src="http://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript">

Kode CSSnya

.riak {
  font:bold 22px Arial;
  color:#555;
  text-decoration:underline;
  cursor:pointer;
  position:relative;
}

.riaknya {
  display:block;
  position:absolute;
  background:#AFEEEE;
  border-radius:100%;
  transform:scale(0);
}

.animasi {
  animation:riak2 1.5s linear;
}

@keyframes riak2 {
  100% {
    opacity:0;
    transform:scale(2.5);
  }
}

Java Script

var parent, riaknya, d, x, y;
$(".riak").click(function(e){
    parent = $(this).parent();
    if(parent.find(".riaknya").length == 0)
        parent.prepend("<span class='riaknya'></span>");
        
    riaknya = parent.find(".riaknya");
    riaknya.removeClass("animasi");
    if(!riaknya.height() && !riaknya.width())
    {
        d = Math.max(parent.outerWidth(), parent.outerHeight());
        riaknya.css({height: d, width: d});
    }
    x = e.pageX - parent.offset().left - riaknya.width()/2;
    y = e.pageY - parent.offset().top - riaknya.height()/2;
    riaknya.css({top: y+'px', left: x+'px'}).addClass("animasi");
})

Kode HTMLnya

<div class="riak">Klik untuk menampilkan riaknya</div>

Untuk menyesuaikan dengan kebutuhan, mungkin kamu butuh setingan tingkat lanjut agar efeknya dapat menyatu dengan laman web yang kamu gunakan.