Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
72 lines (63 sloc) 2.84 KB

js-ripple-click

A JavaScript utility for Ripple effect on click on different HTML elements.

How to use viral-ripple-click.js

  • Download latest js-ripple-click - JavaScript utility.
  • viral-ripple-click.js provides 3 utility functions:
    • viralRippleClick.options() - utility function to get/set options for ripple effect on click on HTML elements
    • viralRippleClick.disable() - utility function to disable ripple effect on click on HTML elements, this PRESERVEs all options
    • viralRippleClick.enable() - utility function to enable ripple effect on click on HTML elements, this PRESERVEs all options

Options

  • elemSelector: CSS selector of the elements on which ripple click effect to be displayed (default value: 'button')
  • color: color to be used for ripple click effect (default value: '#FFFFFF')
  • opacityStart: opacity to be used when ripple click effect starts (default value: '0.4')
  • opacityEnd: opacity to be used when ripple click effect ends (default value: '0')
  • transitionType: transition timing function to be used for ripple click effect (default value: 'ease-in-out')

Utility functions (Syntax and Usage)

  1. options - utility function to get/set options for ripple effect on click on HTML elements

    • get options
      Syntax: viralRippleClick.options();

       // get options for ripple effect
       // example:
       var rippleEffectOptions = viralRippleClick.options();
       // sample returned options object:
       {
       	'elemSelector': 'button',
       	'color': '#FFFFFF',
       	'opacityStart': '0.4',
       	'opacityEnd': '0',
       	'transitionType': 'ease-in-out'
       }
    • set options
      Syntax: viralRippleClick.options(options);

       // set options for ripple effect on click on HTML elements
       // example: set all options
       viralRippleClick.options({
       	'elemSelector': 'button, ul.menu li, #specialElem, [elem-with-ripple-effect]',
       	'color': 'black',
       	'opacityStart': 0.8,
       	'opacityEnd': 0.2,
       	'transitionType': 'linear'
       });
       // example: set only 'color' and 'transitionType' options
       viralRippleClick.options({
       	'color': '#252525',
       	'transitionType': 'ease-in'
       });
  2. disable - utility function to disable ripple effect on click on HTML elements, this PRESERVEs all options

    viralRippleClick.disable();
  3. enable - utility function to enable ripple effect on click on HTML elements, this PRESERVEs all options

    viralRippleClick.enable();

Demo page