Skip to content

mariusclaret/ripple-effect

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Ripple Effect

Get a beautiful Material Design ripple effect in pure JavaScript for your website in less than 1 minute. The script is not blocking rendering on the first paint, because the effect only gets fired on onpointerdown and onpointerup events on the document.

Ripple Effect Demo Gif

Getting Started

Import the ripple.js file in your project:

<script src="ripple.js"></script>

Add ripple class to your element:

<button class="ripple">Button with ripple effect</button>

Done!

Demo

Works only in browsers with pointer events support.

https://htmlpreview.github.io/?https://github.com/mariusclaret/ripple-effect/blob/master/demo.html

Author

Marius Claret (@mariusclaret || https://twitter.com/mariusclaret)

About

Get a beautiful Material Design ripple effect in pure JavaScript for your website in less than 1 minute.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published