Skip to content
jQuery plugin for implementing Material Design inspired ripple click / tap effects using CSS3 animations
Branch: master
Clone or download
Latest commit 5e87f16 May 17, 2016
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css v 1.2.0 Feb 29, 2016
js v1.3.1 May 17, 2016
less v1.3.0 May 17, 2016
.gitignore
README.md v1.3.0 May 17, 2016
bower.json v1.3.1 May 17, 2016
gulpfile.js v 1.2.0 Feb 29, 2016
package.json v 1.2.0 Feb 29, 2016

README.md

#Rippleria

A lightweight yet customizable jQuery plugin for implementing Material Design inspired ripple click / tap effects using CSS3 animations.

##DEMO

##Installation

$ bower i -S rippleria

##Usage

  1. Load the stylesheet jquery.rippleria.css in the head section and the JavaScript jquery.rippleria.js after jQuery library.

    <link rel="stylesheet" href="/path/to/jquery.rippleria.css">
    <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="/path/to/jquery.rippleria.js"></script>
  2. Add the data-rippleria attribute to the DOM element where you want to implement the ripple click effect.

    <button data-rippleria>Default</button>
  3. Customize the ripple click effect using html5 data attributes.

    <button data-rippleria 
      data-rippleria-color="blue" 
      data-rippleria-easing="ease-in" 
      data-rippleria-duration="5000">
      Click me
    </button>
  4. You can also apply the ripple click effect to any block elements and pass in the options via JavaScript.

    $('.selector').rippleria({
    
      // aniamtion speed
      duration: 750,
    
      // custom easing effect
      easing: 'linear',
    
      // custom color
      color: undefined
      
      // enable automatically adding .rippleria-dark class to the dark elements (appeared with 1.3)
      detectBrightness: true
    });
    
    $('.selector').rippleria("changeDuration", "500");
    $('.selector').rippleria("changeEasing", "ease-in-out");
    $('.selector').rippleria("changeColor", "blue");

##Browsers Firefox, Chrome, IE10+, Opera, Safari

You can’t perform that action at this time.