Configurable Ripple Effect On Click/Tap - jQuery Waves.js

Configurable Ripple Effect On Click/Tap - jQuery Waves.js
File Size: 7.47 KB
Views Total: 479
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Waves.js is a tiny jQuery plugin that applies Android (Material Design) inspired, click/tap triggered ripple effect to any DOM elements within the document.

How to use it:

1. Import jQuery and the Waves.js plugin' files into the document.

<!-- jQuery -->
<script src="/path/to/cdn/jquery.min.js"></script>
<!-- Waves.js plugin -->
<link rel="stylesheet" href="/path/to/jquery.waves.css" />
<script src="/path/to/jquery.waves.js"></script>

2. Add the CSS class waves-effect to the elements where you want to enable the ripple effect. That's it.

<button class="waves-effect">
  Click/Tap Me
</button>

3. Customize the ripple color using the waves-color attribute:

<button class="waves-effect" waves-color="grey">
  Click/Tap Me
</button>

4. Or use a random color:

<button class="waves-effect waves-rainbow">
  Click/Tap Me
</button>

5. Customize the animation speed.

<button class="waves-effect waves-slow">
  Slow
</button>

<button class="waves-effect waves-fast">
  Fast
</button>

6. Customize the duration of the animation in milliseconds.

<button class="waves-effect" waves-duration="2500">
  Click/Tap Me
</button>

7. Apply custom styles to the ripple effect.

<button class="waves-effect my-own-wave-style">
  Click/Tap Me
</button>
.my-own-wave-style .ie-waves-effect {
  border-radius: 30%;
  background-color: red;
  opacity: 0.75;
}

This awesome jQuery plugin is developed by isaeken. For more Advanced Usages, please check the demo page or visit the official website.