Material diseño ondulación efecto de clic en Vanilla JavaScript-Ripple. js
| Autor: | davinder17s |
|---|---|
| Views Total: | 2,949 |
| Sitio oficial: | Ir a la web |
| Actualizado: | October 25, 2016 |
| Licencia: | MIT |
Vista prévia
Descripción
Sólo otra biblioteca de JavaScript que aplica un efecto de ondulación animado, material Design inspirado a un elemento clicable utilizando JavaScript puro.
Funcionamiento
Agregue el atributo ' Data-Ripple ' a cualquier elemento en el que desee aplicar el efecto de ondulación al hacer clic.
<button data-ripple> Click Me </button>
Importe el script ' Ripple. js ' a la Página Web.
<script src="ripple.js"></script>
El JavaScript para activar el efecto de ondulación en el elemento Button.
Array.prototype.forEach.call(document.querySelectorAll('[data-ripple]'), function(element){
new RippleEffect(element);
}); Personaliza el efecto de ondulación en el CSS.
.ripple-container .ripple {
background-color: rgba(255,255,255,0.4);
animation: ripple 2s forwards cubic-bezier(0, 0, 0.2, 1);
}
@keyframes
ripple {
0% {
transform: scale(0);
opacity: 1;
}
80% {
transform: scale(1);
}
100% {
opacity: 0;
}
}
