Breaking

Sunday, September 4, 2016

CSS CSS3 Google Material Design HTML Javascript jQuery Ripple Effect Tutorial Membuat Efek Ripple Berbasis Material Design Menggunakan jQuery

Membuat Efek Ripple Berbasis Material Design Menggunakan jQuery

by on in , , , , , , ,

Pada kesempatan kali ini saya akan membahas tentang bagaimana cara membuat efek ripple seperti yang ada pada Google Material Design. Disini saya menggunakan jQuery untuk mempermudah dalam pembuatan efek ripple, versi yang saya gunakan adalah versi 1.9.1.

Saya akan sedikit menjelaskan keseluruhan konsep yang akan digunakan dalam pembuatan efek ripple ini. Jadi ketika sebuah element HTML di klik kita akan menambahkan element baru dimana nantinya di dalam element baru ini terdapat element yang akan kita ingin beri efek. Element baru yang dibuat ini nantinya akan di berikan efek scale dengan warna background tertentu, dan ketika klik mouse selesai efek akan di fade-out(dipudarkan).

Pertama-tama kita akan membuat element yang akan kita beri efek, buatlah file baru beri nama index.html.


<html>
<head>
</head>
<body>
<h1>
Ripple Click Effect</h1>
<ul>
<li><a class="ripple" href="#">Dashboard</a></li>
<li><a class="ripple" href="#">My Account</a></li>
<li><a class="ripple" href="#">Direct Messages</a></li>
<li><a class="ripple" href="#">Chat Rooms</a></li>
<li><a class="ripple" href="#">Settings</a></li>
<li><a class="ripple" href="#">Logout</a></li>
</ul>
</body>
</html>


Sekarang kita akan membuat file CSS untuk mengubah tampilannya serta membuat keyframes untuk animasi ripple, buatlah file baru dan beri nama style.css.

/*basic reset*/

* {
  margin: 0;
  padding: 0;
}

body {
  background-size: cover;
}

h1 {
  font: normal 32px/32px Bitter;
  color: black;
  text-align: center;
  padding: 85px 100px;
}


/*nav styles*/

ul {
  background: white;
  border-top: 6px solid hsl(180, 40%, 60%);
  width: 200px;
  margin: 0 auto;
}

ul li {
  list-style-type: none;
  /*relative positioning for list items along with overflow hidden to contain the overflowing ripple*/
  position: relative;
  overflow: hidden;
}

ul li a {
  font: normal 14px/28px Montserrat;
  color: hsl(180, 40%, 40%);
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  cursor: pointer;
  /*since the links are dummy without href values*/
  /*prevent text selection*/
  user-select: none;
  /*static positioned elements appear behind absolutely positioned siblings(.ink in this case) hence we will make the links relatively positioned to bring them above .ink*/
  position: relative;
}


/*.ink styles - the elements which will create the ripple effect. The size and position of these elements will be set by the JS code. Initially these elements will be scaled down to 0% and later animated to large fading circles on user click.*/

.ink {
  display: block;
  position: absolute;
  background: hsl(180, 40%, 80%);
  border-radius: 100%;
  transform: scale(0);
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
}

.fade-out {
  transform: opacity(0);
  -webkit-transform: opacity(0);
  -moz-transform: opacity(0);
}


/* animation effect keyframes */

.ink.animate {
  animation: ripple 0.65s forwards;
  -webkit-animation:ripple 0.65s forwards; /* For Chrome & Safari/Webkit based browser */
  -moz-animation:ripple 0.65s forwards; /* For Mozilla Firefox */
}

.ink.animate.end {
  transition: all 0.5s ease-in-out;
  background-color: rgba(255, 0, 0, 0.0);
  box-shadow: none;
  border-radius: 0px;
}
@-webkit-keyframes ripple{
  100% {
    -webkit-transform: scale(2.5);
    transform: scale(2.5);

  }
}
@-moz-keyframes ripple{
  100% {
    -moz-transform: scale(2.5);
    transform: scale(2.5);

  }
}

@keyframes ripple {
  /*scale the element to 250% to safely cover the entire link and fade it out*/
  100% {
    transform: scale(2.5);
    -webkit-transform: scale(2.5);
    -moz-transform: scale(2.5);
  }
}


Selanjutnya kita akan menggunakan javascript dan jquery untuk membuat animasi efek Ripple. Buatlah file javascript baru dan beri nama ripple.js, setea itu deklarasikan semua variabel yang dibutuhkan untuk membuat efe ripple.

(function($){
var parent,ink,d,x,y;
}(jQuery);

Berikut sedikit penjelasan tentang variabel yang akan digunakan
variabelfungsi
parent digunakan untuk menyimpan objek html parent dari objek yang di klik
ink digunakan untuk menyimpan element html baru yang akan memberikan efek animasi ripple pada elemen yang diklik
d digunakan untuk menyimpan lebar atau tinggi element parent untuk mendapatkan diameter lingkaran untuk efek ripple
x digunakan untuk menyimpan posisi x dari parent element yang diklik
y digunakan untuk menyimpan posisi y dari parent element yang diklik
Sekarang kita akan membuat fungsi untuk melakukan animasi pada 2 event yaitu event mousedown dan mouseup, mousedown adalah event saat mousedown ditekan dan mouseup adalah event saat tombol mouse dilepas/selesai ditekan. Sebelumnya pada script html tiap element list saya beri nama class ripple sehingga kita akan menggunakan nama class untuk mengeksekusi animasi.
Note:
untuk mengeksekusi perintah yang melibatkan lebih dari satu element menggunakan javascript sebaiknya menggunakan class bukan id, karena id hanya akan mengambil 1 element pertama saja.

(function($){
var parent,ink,d,x,y;
$('.ripple').mousedown(function(e){

});
$('.ripple').mouseup(function(e)){

});
}(jQuery);

Selanjutnya kita akan mulai mengeksekusi perintah-perintah pada event mousedown terlebih dahulu. Didalam fungsi mousedown kita dapat mengakses objek yang sedang diklik dan menganimasikannya menggunakan css yang telah dibuat sebelumnya. Pertama kita perlu mendapatkan parent element dari element yang diklik.

var parent = $(this).parent();

Setelah mendapatkan element parent dari objek yang di klik kita perlu mengecek apakah element ink sudah ada pada element parent atau tidak, jika tidak ada maka buat element ink baru kemudian menyisipkannya kedalam parent element, kemudian simpan element ke variable ink.

if (parent.find(".ink").length == 0){
      parent.prepend("
");
}
ink = parent.find(".ink");

Agar efek ripple dapat selalu berjalan ketika mouse diklik kita perlu menghapus nama class animate dan end dari element ink jika memang pada element parent sudah terdapat element ink.

ink.removeClass("animate");
ink.removeClass("end");

Selanjutnya kita perlu mengatur ukuran dari element ink menggunakan lebar atau tinggi element parent untuk membuat diameter lingkaran yang bisa untuk menutupi element.

if (!ink.height() && !ink.width()) {
      d = Math.max(parent.outerWidth(), parent.outerHeight());
      ink.css({
        height: d,
        width: d
      });
}

Selanjutnya kita perlu mengatur posisi dari element ink namun kita harus mendapatkan kordinat x dan y saat mouse ditekan terlebih dahulu. Untuk mendapatkan kordinat x kita perlu mendapatkan kordinat x dari objek yang diklik relatif pada halaman kemudian dikurangi dengan posisi element parent relatif pada halaman dan dikurangi setengah dari lebar element ink, untuk kordinat y kita dapat menggunakan rumus yang sama yang berbeda hanya pada yang terakhir dimana untuk x kita menggunakan setengah dari lebar element ink sedangkan untuk y kita menggunakan setengah dari tinggi element ink.

x = e.pageX - parent.offset().left - ink.width() / 2;
y = e.pageY - parent.offset().top - ink.height() / 2;

Sekarang atur posisi dari element ink dan tambahkan class animate

ink.css({
      top: y + 'px',
      left: x + 'px'
}).addClass("animate");

Sekarang kita telah selesai membuat efek ripple pada event mousedown, sekarang kita perlu menambahkan 1 baris terahir di event mouseup untuk memberikan efek fade saat mouse selesai diklik dengan menambahkan nama class end pada element ink.

ink.addClass("end");

Sampai disini Anda telah selesai Membuat Efek Ripple Berbasis Material Design Menggunakan jQuery. Mungkin itu saja yang dapat saya berikan pada postingan kali ini.
Semoga Bermanfaat ...!!!

Full Code + Result
By at
Labels: , , , , , , ,