Add Water effact on web page using Ripple JS

About Ripple JS:

MDC Ripple provides the JavaScript and CSS required to provide components (or any element at all) with a material “ink ripple” interaction effect. It is designed to be efficient, uninvasive, and usable without adding any extra DOM to your elements.

MDC Ripple also works without JavaScript, where it gracefully degrades to a simpler CSS-Only implementation.

A tiny foundation for building reactive views with plugins. It aims to have a similar API to Reactive, but allow composition of views, like React. The major difference for other view libraries is that there are no globals used at all. Each view has its own set of bindings and plugins. This makes composition of views really easy.


A ripple can be applied to a variety of elements to represent interactive surfaces. Several MDC Web components, such as Button, FAB, Checkbox and Radio, also use ripples.

A ripple can be added to an element through either a JavaScript or CSS-only implementation. When a ripple is initialized on an element using JS, it dynamically adds a mdc-ripple-upgraded class to that element. If ripple JS is not initialized but Sass mixins are included on the element, the ripple uses a simpler CSS-only implementation which relies on the :hover:focus, and :active pseudo-classes.

You can add beautiful water or ripple effact on your website.

to see example for water effact on web page click on the below link

Dynamic website with water effact

Find Ripple Js on Github

Leave a Reply

Your email address will not be published. Required fields are marked *