Info

This page contains some basic information about Ripple. It assumes you have basic to intermediate knowledge of HTML, CSS and JavaScript.

Getting started

Download the necessary CSS and JavaScript files from the GitHub repository and include them in your HTML as shown below:


							<!DOCTYPE html>
							<html lang='en'>
								<head>

									...

									<link rel='stylesheet' href='/css/ripple.css'>

								</head>
								<body>

									...

								</body>

								<script type='text/javascript' src='/js/ripple.js'></script>
							
							</html>

After including the necessary files you should initialize Ripple with JavaScript:


							Ripple.initialize()

Note: To learn how to initialize Ripple with custom options please check the documentation.

After initialization, Ripple has included a default class name .ripple-effect out of the box that can be used on elements:


							<button class='my-button ripple-effect'>I will ripple!<button>

To edit the color of the ripple effect you can set --ripple-effect CSS custom property (variable) to any valid CSS color:


							.my-button {
								--ripple-effect: #35A6531F;
							}

Note: Make sure to make the color of the ripple effect transparent.

But if for some reason you can't or don't want to add a class name to every single HTML element in your code, you can attach Ripple effects to specific element(s) using JavaScript:


							// Attaches a class name trigger.
							Ripple.attach('.my-button')

							// Attaches an array of class name triggers with custom ripple options.
							Ripple.attach(['.circle-button', 'mdc-icon-button'], {'centered': true})

							// Attaches an element trigger.
							Ripple.attach(document.querySelector('.mdc-fab'))

Note 1: Attaching class name triggers should be considered the better option than attaching element triggers because of the way JavaScript compares elements.

Note 2: When using class names with Ripple, the leading dot can be omitted.

Disabling Ripple triggers can be done in many different ways depending on your own preference.

If you wish to prevent a specific element from rippling you can do so by disabling the trigger or target element by adding disabled attribute to either of the HTML elements but only if ripple.disabledAttribute option is set to true.


							Ripple.initialize({'disabledAttribute': true}) // Sets the global option 'disabledAttribute' to true.
							// Or
							Ripple.attach('.ripple-effect', {'disabledAttribute': true}) // Sets the trigger option 'disabledAttribute' to true for '.ripple-effect' class name trigger.

Note: If a class name trigger was already attached and you try to attach it again with different options, only the options will be changed.


							<button class='my-button ripple-effect' disabled>I will not ripple!<button>

But if you wish to disable the whole trigger, you can do so by changing the trigger option disabledAttribute to true.


							// Because '.mdc-button' trigger was already attached, calling this function will only
							// change the trigger option 'disabled' to true for '.mdc-button' class trigger.
							Ripple.attach('.mdc-button', {'disabled': true})

But if you no longer wish to use the trigger, you can call Ripple.detach()


							// Detaches (deletes) a class name trigger and its options.
							Ripple.detach('mdc-button')

Frequently Asked Questions

What are trigger and target elements?

Trigger element - HTML Element that was used (clicked or touched) to trigger a ripple effect.

Target elements - HTML Elements that will contain a ripple container element and/or ripple effect elements.

Browser support?

Don't know yet.

Help, I have a problem!

Feel free to send me a message on Discord: Alexander_#6686