Efeito de ripples baseado no Material Design feito com CSS, JavaScript e jQuery
Esse efeito utiliza seletores do jQuery e manipulação do DOM para obter um efeito extremamente preciso em relação ao original.
Demo
Como usar
| 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 |
Nota: as classes ripples-light e ripples-dark só funcionam em conjunto com a classe md-ripples.
Mudando os padrões do efeito
- 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.
Criando classes personalizadas
- 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.
Nota: a opacidade padrão é .16 e sua alteração é opcional.
Instalando no seu projeto
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.
Adicionando ao seu projeto
- 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>