Animación flexible de ondas configurables en Vanilla JavaScript-wavejs
| Autor: | QiShaoXuan |
|---|---|
| Views Total: | 224 |
| Sitio oficial: | Ir a la web |
| Actualizado: | February 16, 2019 |
| Licencia: | MIT |
Vista prévia
Descripción
wavejs es un plugin de JavaScript flexible y configurable para simular las ondas en la superficie del agua usando Vanilla JavaScript y Canvas API.
See also:
Funcionamiento
Importa el archivo principal de JavaScript Wave. js en el documento.
<script src="/path/to/wave.js"></script>
Inicializar la biblioteca de wavejs para generar una animación de ondas básicas. El contenedor parámetro se utiliza para especificar el elemento de destino en el que se generará la animación de ondas.
const waveAnimation = new Wave(container)
Config la animación de ondas pasando el siguiente objeto Options como segundo parámetro a la función Wave .
const waveAnimation = new Wave(container,{
// number of waves
number: 3,
// smoothness
smooth: 50,
// animation speed
velocity: 1,
// height in pixels or percent
height: .3,
// color
colors: ['#ff7657'],
// border options
border: {
show: false,
width: 2,
color: ['']
},
// opacity
opacity: .5,
// 'top' | 'bottom' | 'left' | 'right'
position: 'bottom'
}) API methods.
// start waveAnimation.animate(); // pause waveAnimation.pause(); // set options setOptions(options); // reset reset();
