Ripple Effect Click

You probably have noticed that ripple effect --(known as "ripple")-- when you click on an element on your Android. Now you can implement it to your application very fast and easily.

How to use:

Simple and standard use, just define the class or element you want to add the ripple effect. This example will apply the ripple effect to all buttons you have.

$('button').rippleEffect();

You also can define more than one element into the same definition, just like this:

$('button, .to-ripple, .element-test').rippleEffect();

Extra configurations:

There are some extra settings you can apply to the ripple's configuration:

• timingFunction
• duration

Animation properties:

• CSS animation-timing-function Property:
  • timingFunction: linear

  • $('button').rippleEffect({
        timingFunction: 'linear'
    });

• CSS animation-duration Property:
  • duration: '0.65s'

  • $('button').rippleEffect({
        duration: '2s'
    });

Contribution

Want to contribute to this extension? The quickest way is to open a pull request on GitHub.

Support

If you encounter any problems or bugs, please open an issue on GitHub. Need help setting up or want to customize this extension to meet your business needs? Please let me know!