Skip to content

Add ripple effect to any element you want when the click action happens ("ripple effect")

License

Notifications You must be signed in to change notification settings

williankeller/ripple-effect-click

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

28 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Ripple Effect Click

Build Status

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!