Tutorial
September 04, 2016
Membuat Efek Ripple Berbasis Material Design Menggunakan jQuery
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.
Berikut sedikit penjelasan tentang variabel yang akan digunakan
(function($){
var parent,ink,d,x,y;
}(jQuery);
| variabel | fungsi |
| 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 |
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.
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.
(function($){
var parent,ink,d,x,y;
$('.ripple').mousedown(function(e){
});
$('.ripple').mouseup(function(e)){
});
}(jQuery);
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.
var parent = $(this).parent();
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.
if (parent.find(".ink").length == 0){
parent.prepend("");
}
ink = parent.find(".ink");
Selanjutnya kita perlu mengatur ukuran dari element ink menggunakan lebar atau tinggi element parent untuk membuat diameter lingkaran yang bisa untuk menutupi element.
ink.removeClass("animate");
ink.removeClass("end");
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.
if (!ink.height() && !ink.width()) {
d = Math.max(parent.outerWidth(), parent.outerHeight());
ink.css({
height: d,
width: d
});
}
Sekarang atur posisi dari element ink dan tambahkan class animate
x = e.pageX - parent.offset().left - ink.width() / 2;
y = e.pageY - parent.offset().top - ink.height() / 2;
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.css({
top: y + 'px',
left: x + 'px'
}).addClass("animate");
Sampai disini Anda telah selesai Membuat Efek Ripple Berbasis Material Design Menggunakan jQuery. Mungkin itu saja yang dapat saya berikan pada postingan kali ini.
ink.addClass("end");
Semoga Bermanfaat ...!!!
Full Code + Result
