Crear Wiggly DIV utilizando JavaScript y Canvas-WIV. js
| Autor: | jjkaufman |
|---|---|
| Views Total: | 292 |
| Sitio oficial: | Ir a la web |
| Actualizado: | January 8, 2019 |
| Licencia: | MIT |
Vista prévia
Descripción
WIV. js es una librería JavaScript elegante para crear marcos DIV Wiggly configurables usando JavaScript y HTML5 Canvas.
La animación suave se basa en el window. requestAnimationFrame API.
Funcionamiento
Descargue e importe la biblioteca WIV. js en el documento.
<script src="wiv.js"></script>
Agregue la clase WIV al elemento DIV y config el efecto de ondulacion con los siguientes atributos de datos HTML:
- Data-WIV-Speed: velocidad de animación
- Data-WIV-height: altura
- de estanqueidad de datos: estanqueidad
- Data-WIV-grosor: espesor
- Data-WIV-color: color
<div class="wiv" data-wiv-speed=".15" data-wiv-height="5" data-wiv-tightness="6" data-wiv-thickness="2" data-wiv-color="#FFFF00" >
Inicializar la biblioteca WIV. js. Hecho.
let instance = wiv.wiv(); instance.initWivs();
Registro de cambios
01/08/2018
- Añadido atributo de datos selector CSS y probarlo antes de ejecutar animaciones
01/06/2018
- Añadida la configuración de dirección configurable para wivs
12/26/2018
- Reemplazamos todas las instancias de var con Let
