Ripple Effect

Uma implementação do efeito de ripples do Material Design criada a partir de engenharia reversa com CSS, JavaScript e jQuery, com o objetivo de ser a mais precisa possível em relação ao efeito original.

Demo

Como usar

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

Classe	Efeito
md-ripples	Adiciona o efeito ao elemento
ripples-light	Muda a cor do efeito para branco
ripples-dark (padrão)	Muda a cor do efeito para preto

Mudando os padrões do efeito

Use a classe .ripple dentro de um elemento .md-ripples como seletor e coloque a cor e a opacidade desejada. Com isso, todo elemento com a classe .md-ripples terá a configuração definida, como no exemplo abaixo.

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

Criando classes personalizadas

Dê o nome que quiser à sua classe e use como seletor a classe .ripple dentro dela, como no exemplo abaixo.

.ripples-purple .ripple {
    background-color: #B721FF;
    opacity: .32;
}

Nota: A opacidade padrão é de .16 e não precisa ser alterada junto com a cor.

Adicione ao seu projeto

Você pode instalar com o npm

npm install @gabrielfins/ripple-effect

Com o yarn

yarn add @gabrielfins/ripple-effect

E importar no seu arquivo JavaScript:

import '@gabrielfins/ripple-effect';

Ou pode baixar e adicionar o arquivo ao seu projeto e importar com a seguinte tag:

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

downloadBaixar