Press "Enter" to skip to content

A Lightweight And Fast Particle Library Written in JavaScript | Spark Particles

Spark Particles is a lightweight and fast particle library written in JavaScript. SparkParticles is a fast and configurable JavaScript library for generating a cool particle system on an HTML5 canvas.

particles js background codepen, particles js, html5 canvas particle animation and parallax demo, three js particles codepen, particles js tutorial, particle background js

How to make use of 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 aspect on the web page.

<canvas id="particles"></canvas>

3. Render a primary particle system on the canvas.

const node = document.getElementById('particles');
const particles = new Particles(node).init({
      // configs here
}).start()

4. Available choices to customize the particle 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,
      }
      
})

Fast And Configurable Particle Library, Spark Particles Plugin/Github, particles js alternative, particle js examples


See Demo And Download

Official Website(GellTorn): Click Here

This superior jQuery/javascript plugin is developed by GellTorn. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.