Ripple Effect

Essa é uma implementação do efeito de ripples do Material Design criada a partir de engenharia reversa, feita com CSS, JavaScript e jQuery. É uma implementação extremamente precisa em relação à original.

Demo

Como usar

Para usar o efeito, basta usar o guia abaixo e adicionar as classes CSS desejadas ao elemento.

Classe	Efeito
ripple-effect	Adiciona o efeito ao componente
ripples-light	Muda a cor do efeito para sua versão clara
ripples-dark (padrão)	Muda a cor do efeito para sua versão escura

Criando classes personalizadas

Crie uma classe com o nome desejado e use como alvo a classe .ripple dentro dela, como no exemplo abaixo.


                    .ripples-blue .ripple {
                        background-color: #21D4FD;
                        opacity: .32;
                    }

Nota: modificar a opacidade é opcional.

Adicione ao seu projeto

Você pode adicionar com o npm


                npm install @gabrielfins/ripple-effect

com o yarn


                yarn add @gabrielfins/ripple-effect

e depois importar com o código:


                import "@gabrielfins/ripple-effect";

ou pode baixar e adicionar ao seu projeto e importar com essa tag na head ou no body do seu arquivo html


                <script src="dist/ripples.js"></script>

downloadBaixar