Skip to content

mobilex1122/ripple.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Ripple.js

Very simple Javascript based android ripple effect for web.

Example

Installation and setup:

  • Download ripple.js
  • Link css:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="./ripplejs.css">
    </head>
  • Link JS:
    <script src="./ripple.js"></script>

Usage:

Adding ripple:

  • html:
    <div class="ripple"></div>
  • JavaScirpt:
    var element = document.querySelector(".ripple")
    addRipple(element)

Documentation:

addRipple(element, rippleGrowMax = "100%", rippleOpacity = "0.3")

element: (Requied) parent element for ripple domain

rippleGrowMax: (Optional Default: 100%) Maximum allowed size for ripple effect in % or any other css units

rippleOpacity: (Optional Default: 0.3) Maximum allowed opacity for ripple effect in range of 0 to 1