ripple-js
A small Javascript library for ripple effects
####View a demo here
Setup
With npm:
1. At the root of your index, type npm install ripple-js
into the command line.
2. Add the tag <script src="node_modules/ripple-js/ripple.min.js"></script>
to your index file.
Then simply add the class ripple to elements
Properties
To customize the ripple effect you can set the following tags on your ripple elements:
-
ripple-color
Customize the background of the ripple
°Corresponds to the css background
property. You can set it to a color, a gradient or even a picture.
°Examples: ripple-background="#FF8C00"
, ripple-background="radial-gradient(red, yellow, green)"
, ripple-background="url('some-image.jpg')"
°Default Value: white
-
ripple-opacity
Set the opacity of the ripple
°Corresponds to the css opacity
property. Set it to a numerical value between 0 and 1, where 0 means full transparency and 1 no transparency
°Example: ripple-opacity="0.7"
°Default value: 0.6
-
ripple-shadow
Add a shadow to the ripple
°Corresponds to the css box-shadow
property.
°Example: ripple-shadow="box-shadow: 0px 0px 25px 2px rgba(112,112,112,0.63)"
°Default value: none
-
ripple-press-expand-time
Change the time the ripple needs to fully expand while the element is being pressed.
°The unit of measurement is seconds.
°Example: ripple-press-expand-time="10"
°Default value: 3
-
ripple-release-expand-time
Set the time the ripple needs to ripple away when the user releases the mouse / touch.
°The unit of measurement is seconds.
°Example: ripple-release-expand-time="1.5"
°Default value: 0.4
-
ripple-leave-collapse-time
Configure the time the ripple collapses in itselft when the user moves the touch / mousepress away from the element.
°The unit of measurement is seconds.
°Example: ripple-leave-collapse-time=".8"
°Default Value: 0.4
-
ripple-cancel-on-move
If applied, the ripple cancels on the slightest touch movement.
°Normally the ripple gets canceled when the touch is being moved out of the container. With this attribute, the touch gets canceled on a touchmove or mousemove. This is especially great for when the container can be scrolled around by the user.
-
onrippleclick
You can specify JavaScript that executes when the ripple gets released in this attribute. It works like onclick and is a short alternative to listening for a ripple-button-click event.
###Methods
document.body.innerHTML += '<div class="ripple">Added Afterwards</div>';
ripple.registerRipples();
###Events
Tip: To unregister an element, simply remove the ripple
class.