Animación de burbujas personalizable con JavaScript y Canvas-Bubbly-BG
| Autor: | tipsy |
|---|---|
| Views Total: | 2,956 |
| Sitio oficial: | Ir a la web |
| Actualizado: | October 10, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Bubbly-BG es una librería JavaScript que dibuja una animación de burbujas personalizable en un elemento canvas HTML5. Ideal para fondos animados.
Instalación
$ npm install bubbly-bg --save
Funcionamiento
Importe la biblioteca de Bubbly-BG a su documento.
<script src="bubbly-bg.js"></script>
Cree un elemento canvas HTML en la Página Web.
<canvas id="demo" width="400" height="300"></canvas>
El JavaScript para dibujar una animación de burbuja por defecto en el elemento canvas.
bubbly({
canvas: document.getElementById("demo")
}); Configuración de las burbujas de la siguiente manera:
bubbly({
animate: false,
blur: 4,
bubbleFunc: () => `hsla(0, 0%, 100%, ${r() * 0.1})`)
bubbles: 100,
canvas: document.querySelector("#background"),
colorStart: "#2AE",
colorStop: "#17B",
compose: "lighter",
shadowColor: "#fff",
angleFunc: () => Math.random() * Math.PI * 2, // default is this
velocityFunc: () => 0.1 + Math.random() * 0.5, // default is this
radiusFunc: () => 4 + Math.random() * 25 // default is 4 + Math.random() * width / 25
}); Registro de cambios
10/10/2018
- opción de agregar para configurar el ángulo
