Material diseño click Ripple efecto en Vanilla JavaScript-material táctil
| Autor: | Loyen |
|---|---|
| Views Total: | 3,336 |
| Sitio oficial: | Ir a la web |
| Actualizado: | January 16, 2015 |
| Licencia: | MIT |
Vista prévia
Descripción
Una solución de JavaScript Vanilla para crear animaciones de ondulación de clic/TAP inspiradas en los botones de acción de Google material Design.
Funcionamiento
Cargue la biblioteca de material Touch JS al final del documento.
<script src="js/md.js"></script>
Agregue la clase CSS MD-Ripple a los botones de acción.
<button class="md-ripple">Demo button</button>
Los estilos CSS principales para las animaciones de ondulación.
.md-ripple {
overflow: hidden;
position: relative;
}
.md-ripple * { pointer-events: none; }
.md-ripple-effect {
pointer-events: none;
position: absolute;
display: block;
background: #000;
width: 0;
height: 0;
border-radius: 100%;
z-index: 1;
} Habilite la animación de ondulación.
new materialTouch('.md-ripple'); opciones materialTouch ().
// new materialTouch(rippleIdentifier, custom_options);
new materialTouch('.md-ripple', {
classes: {
rippleContainer: 'md-ripple-wrapper',
ripple: 'md-ripple-effect'
},
transition: {
easing: 'easeOutExpo',
delay: 0,
duration: 600
},
opacity: 0.5,
size: 0.75,
center: false
});
