Ripple effect

Subtitle

To apply a ripple effect to an element, it must have content, for example 'img' does not meet this condition, but 'button' already yes.

Basic example

Colors

Duration

Centered

 .square { height: 100px; width: 100px; }

Unbound

 .square { height: 100px; width: 100px; }

Radius

.square { height: 100px; width: 100px; }

Images Ripple effect

Adds ripple effect for image in card component via ripple class

example
example
example
example
example
example
example
example
example
example
example
example
.square { height: 100px; width: 100px; }

Card - JavaScript implementation

Adds ripple effect for image in card component via JavaScript implementation

...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

document .querySelectorAll('.card-img-top') .forEach((cardImage) => new mdb.Ripple(cardImage, { color: 'light' }));

Card - jQuery implementation

Adds ripple effect for image in card component via jQuery implementation

...
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

...
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

...
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

...
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

...
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

...
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

$('.card-img-left').ripple({color: 'light'})

Ripple effect - API

Usage

Via data attributes

By default elements with btn and ripple classes includes ripple effect

...

Via JavaScript

... document .querySelectorAll('.example') .forEach((element => new mdb.Ripple(element, options));

Via jQuery

... $('.example').ripple(options);

Options

Name Type Default Description
rippleCentered Boolean false Centers the position of wave
rippleColor String '' Changes color of wave
rippleDuration String '500ms' Sets duration of animation
rippleRadius Number 0 Sets radius value
rippleUnbound Boolean false Sets whether the effect should go beyond the wrapper's boundaries

Methods

Name Description Example
dispose Manually dispose of component ripple.dispose()