Esse efeito utiliza seletores do jQuery e manipulação do DOM para obter um efeito extremamente preciso em relação ao original.
| Classe | Efeito |
|---|---|
| md-ripples | 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 |
- Exemplo:
.md-ripples . ripple {
background-color: #21D4FD;
opacity: .32;
}Nesse exemplo, todo elemento que tiver o efeito adicionado com .md-ripples terá o efeito da cor #21D4FD.
- Exemplo:
.ripples-blue .ripple {
background-color: #B721FF;
opacity: .32;
}Nesse exemplo, o elemento que tiver a classe .ripples-blue terá o efeito da cor #B721FF.
Você pode realizar a instalação das seguintes maneiras:
- Utilizando o npm
npm install @gabrielfins/ripple-effect
- Utilizando o yarn
yarn add @gabrielfins/ripple-effect
- Baixando os arquivos
Acesse o site de demonstração, vá até a seção "Adicione ao seu projeto" e clique no botão "Baixar" para fazer o download apenas dos arquivos necessários. Ou baixe diretamente do repositório.
- Instalando com npm ou yarn
Após realizar a instalação, basta importar o pacote para o arquivo.
import "@gabrielfins/ripple-effect";- Ao baixar os arquivos
Por esse método, basta adicionar a tag a seguir em qualquer lugar na tag <head> ou <body> do seu documento html.
<script src="ripples.js"></script>Instale usando jsdelivr CDN (Install Using jsdelivr CDN):
<script src="https://cdn.jsdelivr.net/gh/gabrielfins/ripple-effect/dist/ripples.js"></script>