https://github.com/williankeller/ripple-effect-click
Add ripple effect to any element you want when the click action happens ("ripple effect")
https://github.com/williankeller/ripple-effect-click
android animation css css3 jquery jquery-plugin lollipop lollipop-effect ripple ripple-effect
Last synced: about 2 months ago
JSON representation
Add ripple effect to any element you want when the click action happens ("ripple effect")
- Host: GitHub
- URL: https://github.com/williankeller/ripple-effect-click
- Owner: williankeller
- License: mit
- Created: 2015-08-31T12:11:47.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2019-10-21T09:06:24.000Z (over 5 years ago)
- Last Synced: 2025-03-25T17:49:23.420Z (2 months ago)
- Topics: android, animation, css, css3, jquery, jquery-plugin, lollipop, lollipop-effect, ripple, ripple-effect
- Language: JavaScript
- Homepage: http://williankeller.github.io/ripple-effect-click/
- Size: 43.9 KB
- Stars: 15
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Ripple Effect Click
[](https://travis-ci.org/williankeller/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.
```javascript
$('button').rippleEffect();
```
You also can define more than one element into the same definition, just like this:
```javascript
$('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
- ```javascript
$('button').rippleEffect({
timingFunction: 'linear'
});
```
* *CSS animation-duration Property:*
- `duration`: '0.65s'
- ```javascript
$('button').rippleEffect({
duration: '2s'
});
```
### Contribution
Want to contribute to this extension? The quickest way is to open a [pull request on GitHub](https://help.github.com/articles/using-pull-requests).
### Support
If you encounter any problems or bugs, please open an issue on [GitHub](https://github.com/williankeller/ripple-effect-click/issues).
Need help setting up or want to customize this extension to meet your business needs? Please let me know!