How To Create Ripple Effect Using jQuery & CSS3

By admin / 7:37 pm, 22 May 2016 / CSS, jQuery / 0 Comment

Ripple effect is very cool animation where an ink-drop like element moves out radially from the position where the user taps/clicks. In 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:-

Now add this css:

Now its time to handle click events and generate the circle inside that element:-

Check out this demo. How it works :-

View Demo

Previous Post
Next Post