Author: | GellTorn |
---|---|
Views Total: | 1,517 views |
Official Page: | Go to website |
Last Update: | April 16, 2021 |
License: | MIT |
Preview:

Description:
spark-particles is a fast and configurable particle JavaScript library for generating a cool particles system on an HTML5 canvas.
How to use it:
1. Install and import the spark-particles as an ES module.
# NPM $ npm i spark-particles
import Particles from "spark-particles"
// OR import Particles from './src/Particles.js'
2. Create an HTML canvas element on the page.
<canvas id="particles"></canvas>
3. Render a basic particles system on the canvas.
const node = document.getElementById('particles'); const particles = new Particles(node).init({ // configs here }).start()
4. Available options to customize the particles system.
const particles = new Particles(node).init({ // enable debug mode debug: false, // auto resize to fit the screen resize: true, // config particles here particles: { amount: 250, moveDirection: 'random', // 'random' | 'top' | 'right' | 'bottom' | 'left' distanceToLink: 150, linkedParticles: true, maxVelocity: 0.8, maxRadius: 4, }, // rendered configs renderer: { linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1, color1: '#327fc2', color2: '#014987', }, width: window.innerWidth, height: window.innerHeight, dpiMultiplier: 1, } })
Changelog:
v1.2.2 (04/16/2021)
- renderer fix