Animación de partículas interactivas en JavaScript puro
| Autor: | Zilfaron |
|---|---|
| Views Total: | 400 |
| Sitio oficial: | Ir a la web |
| Actualizado: | January 10, 2019 |
| Licencia: | MIT |
Vista prévia
Descripción
Sin embargo, otro sistema de partículas interactivas construido con JavaScript y Canvas API. Estas partículas se conectarán automáticamente por líneas cuando estén lo suficientemente cerca.
Funcionamiento
Cargue los archivos JavaScript necesarios en el documento.
<script src="libs/vector.js" async></script> <script src="js/main.js" defer></script>
Aplique sus propias clases CSS al contenedor de la partícula.
.particles-area {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
} Config las partículas en el Main. js .
let particleConfig = {
r: 8,
// radius
s: 1.9,
// speed
acc: 0.65,
// acceleration
maxS: 7,
// max speed
sb: 11,
// shadow blur
colors: [
// list of possible colors
"#12D800",
"#B8860B",
"#9400D3",
"#008000",
"#4682B4",
"#FF6347",
"#663399"
]
}; Registro de cambios
01/10/2019
- Agregue controles de configuración y optimice el dibujo
