@gabrielfins/ripple-effect
v1.0.6
Published
Precise implementation of Material Design's ripple effect with CSS, JavaScript and jQuery
Downloads
579
Maintainers
gabrielfinsReadme
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
- https://gabrielfins.github.io/ripple-effect
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>Instale usando jsdelivr CDN (Install Using jsdelivr CDN):
<script src="https://cdn.jsdelivr.net/gh/gabrielfins/ripple-effect/dist/ripples.js"></script>