Biblioteca de animación ondulante multiplataforma-Ripple. js

Vista prévia

Descripción

Ripple. js es una biblioteca JavaScript simple y ligera para crear efectos de ondulación inspirados en Google material Design que funcionan tanto en dispositivos móviles como de escritorio.

¿Cómo funciona?

Descargue y agregue la versión minimizada de Ripple. js en su documento HTML.

<script src="ripple.min.js"></script>

Inicialice Ripple. js en la carga de la página.

window.onload = function() {

ripple.registerRipples();
}

Configuración del efecto de ondulación con los siguientes atributos.

• color ondulante: El fondo de la ondulación. También acepta imágenes de fondo.
• ondulación-opacidad: La opacidad de la ondulación.
• Ripple-Shadow: El cuadro-sombra de la ondulación.
• Ripple-Press-expandir-tiempo: El tiempo que la ondulación necesita para expandirse completamente mientras se presiona el elemento.
• Ripple-Release-expandir-tiempo: El tiempo que la ondulación necesita para ondulación lejos cuando el usuario suelta el ratón/toque.
• ondulación-permiso-colapso-tiempo: El momento en que la ondulación se contrae en itselft cuando el usuario mueve el toque/ratón de pulsación lejos del elemento.

<div class="ripple"



 ripple-color="DarkMagenta"



ripple-opacity="0.9">
</div>

Ejecute una devolución de llamada después de desencadenar el efecto de ondulación.

document.getElementById('container').addEventListener('ripple-button-click', function() {

alert('The element got succesfully clicked!');
});