Material Inspired Ripple Animation In jQuery - lv-ripple

Just another jQuery plugin which utilizes CSS3 transitions/transforms to create Material Design inspired ripple animations for buttons and links.

How to use it:

1. Include the jQuery lv-ripple plugin's stylesheet lv-ripple.css in the head section of the webpage.

<link rel="stylesheet" href="src/css/lv-ripple.css">

2. Include jQuery library and the jQuery lv-ripple plugin's scriot lv-ripple.js at the bottom of the webpage.

<script src="h//code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="src/js/lv-ripple.jquery.js"></script>

3. Initialize the plugin and we're ready to go.

$.ripple.init();

4. Implement the ripple animation on a flat button.

<ripple>
  Button
</ripple>

5. Implement the ripple animation on a raised button.

<ripple class="r-raised">
  Button
</ripple>

6. Implement the ripple animation on a round button.

<ripple class="r-round r-raised">
  Button
</ripple>

7. Customize the ripple animation with the following attributes:

• r-opacity=".2": opacity level of the ripple animation
• r-color="#F44336": background color of the ripple animation
• r-light: the ripple animation should start at the right of the button

<ripple class="r-raised" 
        r-color="#F44336" 
        r-opacity=".2"
        r-right>
  Custom
</ripple>

Change log:

2016-09-22

• fixed for mobile devices

2016-07-25

• Added obj elements, fix double fire mobile event

---

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