Animación de partículas personalizadas con JavaScript y Canvas-particler
| Autor: | bereziuk |
|---|---|
| Views Total: | 5,881 |
| Sitio oficial: | Ir a la web |
| Actualizado: | March 25, 2016 |
| Licencia: | MIT |
Vista prévia
Descripción
particler es una librería JS muy pequeña (~ 4Kb) que aprovecha HTML5 Canvas para crear animaciones de partículas personalizables para tu página web. Ideal para crear un fondo animado y moderno para su proyecto Web.
¿Cómo funciona?
Descargue y agregue la versión minimizada de particler a su página web.
<script src="dist/particler.min.js"></script>
Cree un elemento canvas de HTML5 para la animación de partículas.
<canvas id="example"></canvas>
Declare un nuevo objeto Particler con las opciones predeterminadas.
var ParticlerExample = new Particler("example"); Configuración de la animación de partículas.
var ParticlerExample = new Particler("example",{
// these are default options
// Amount of particles
quantity: 20,
// line width
lineWidth: 0.05,
// color of particles
fillColor: "black",
// min/max sizes
minSize: 1,
maxSize: 3,
// minimailist line length
minimalLineLength: 250,
// animation speed
speed: 25,
// frame update time
frameDuration: 20,
// background color
backgroundColor: 'transparent'
});
