/ripple-effect

A simple animation made with vanilla html, css and javascript. It consists in a animation like wave effect of material design.

Primary LanguageCSS

Ripple Effect

Gif recorded with byzanz-record

Ripple effect made with JavaScript HTML and CSS. Very flexible and complete.

🚀 Technologies

  • JavaScript
  • HTML
  • CSS

⚠️ How to use

<div class="ripple">Default</div>

Just this made a container with a ripple effect.

But you can customize some characters of the ripple effect, like color and size, just do that in styles of your component.

styles.css

.mycomponent { --wave-color: black; --wave-scale: 10; }

--wave-color change the color of ripple

--wave-scale change the size of ripple