How to create Material design ripple effects using jQuery and Css

Ripple effect is very cool animation where an ink-drop like element moves out radially from the position where the user taps/clicks.
I this post i am going to show you how you can create Ripple effect using jQuery and css.

Basically the main logic is create circle at specific cordinates(i.e where user click/taps) inside linked element(with overflow hidden).
The circles are initially scaled down to 0% and then animated to 100% so it can cover the parent element. As the circle increased their opacity will be
decreased and after that we will remove that circle using jQuery so when user gain click on element same actions will be performend.

So lets create button in html page:-

<button class="ripple">Click here!</button>

Now add this css:

button{
position: relative;
border: none;
outline:none;
cursor: pointer;
background: #0B92FE;
color: white;
padding: 18px 60px;
border-radius: 2px;
font-size: 22px;
}

//make sure to set overflow:hidden otherwise scrollbars will visible when circle scale to 100%
.ripple{
overflow:hidden;
}

.add-effect{
position: absolute;
border-radius: 50%;
width: 50px;
height: 50px;
background: white;
animation: animation 1.8s;
}
//this css will scale circle to 100% and decrease the opacity.
@keyframes animation {
from {
transform: scale(1);
opacity: 0.4;
}
to {
transform: scale(100);
opacity: 0;
}
}

Add jquery file:-

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script></pre>
<pre>
Now its time to handle click events and generate the circle inside that element:-
<script>
$(function() {
$('.ripple').on('click', function (event) {
event.preventDefault();
//get cursor position x and y when user click on element
var btnOffset = $(this).offset(),
xPos = event.pageX - btnOffset.left,
yPos = event.pageY - btnOffset.top;

//create div which will anymate and generate ripple effect
var $div = $('<div/>',{class:'add-effect'});
$div.css({
height:$(this).height(),
width:$(this).height(),
top: yPos - ($div.height()/2),
left: xPos - ($div.width()/2),
background: $(this).data("color") }).appendTo($(this));

//remove div after 2 second
window.setTimeout(function(){
$div.remove(); }, 2000);
});
});
</script>

You can check Demo here

if you have any query or suggetions please comment bellow. And Please share if you like this information.

Add a Comment

Your email address will not be published. Required fields are marked *