Press "Enter" to skip to content

JavaScript Library That Falling Particles With The Sparticles

Sparticles.js is a lightweight and powerful library for creating drop particles using JavaScript, requestAnimationFrame, and HTML5 canvas. For those occasions, you must have glitter, snow, or stars on your homepage!

spark ar particles behind face, sparticles js, awesome web effect, morphing background shapes js, long lived particles, cursor particle effects

How to make use of it:

1. Download and import the Sparticles.js library into your challenge.

<!-- Vanilla JS -->
<script src="/path/to/dist/sparticles.js"></script>

<!-- jQuery -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dist/sparticles.js"></script>

2. Initialize the Sparticles.js on the targer container the place you need to render the particles.

// Vanilla JS
(function() {
  window.onload = function() {
    var $main = document.querySelector("main");
    window.mySparticles = new Sparticles($main);

// jQuery
$(function() {
  var $main = $("main");
  window.mySparticles = new Sparticles($main.get(0));

// ESM
new Sparticles( document.querySelector("main"));

// Svelte
let sparticles;
function addSparticles(node) {
  new Sparticles(node);

3. Customize the particles by overriding the next choices and cross the choices object because the second parameter to the Sparticles().

new Sparticles($main,{

    // rate of change in alpha over time
    alphaSpeed: 10,

    // random deviation of alpha change
    alphaVariance: 1,

    // should the particles bounce off edge of canvas
    bounce: false,

    // css color as string, or array of color strings
    color: "random",

    // a custom function for setting the random colors when color="random"
    randomColor: randomHsl,

    // the number of random colors to generate when color is "random"
    randomColorCount: 3,

    // canvas globalCompositeOperation value for particles
    composition: "source-over",

    // number of particles on the canvas simultaneously
    count: 50,

    // default direction of particles in degrees
    direction: 180,

    // the "driftiness" of particles which have a horizontal/vertical direction
    drift: 1,

    // the glow effect size of each particle
    glow: 0,

    // if shape is "image", define an image url (can be data-uri, must be square (1:1 ratio))
    imageUrl: "",

    // maximum alpha value of every particle
    maxAlpha: 1,

    // maximum size of every particle
    maxSize: 10,

    // minimum alpha value of every particle
    minAlpha: 0,

    // minimum size of every particle
    minSize: 1,

    // speed multiplier effect for larger particles (0 = none)
    parallax: 1,

    // can particles rotate
    rotate: true,

    // default rotational speed for every particle
    rotation: 1,

    // shape of particles (any of; circle, square, triangle, diamond, line, image) or "random"
    shape: "circle",

    // default velocity of every particle
    speed: 10,

    // fill style of particles (one of; "fill", "stroke" or "both")
    style: "fill",

    // particles to exhibit an alternative alpha transition as "twinkling"
    twinkle: false,

    // random deviation of particles on x-axis from default direction
    xVariance: 2,

    // random deviation of particles on y-axis from default direction
    yVariance: 2

4. Set the width & height of the canvas component.

new Sparticles($main, options, 400, 400);

5. API strategies.

// destroy the Sparticles instance and remove event listeners

// set the canvas size
instance.setCanvasSize( width, height );

// reset all the particles

Create Performant Falling Particles With The Sparticles Library, Sparticles Plugin/Github, morphing background shapes css

See Demo And Download

Official Website(simeydotme): Click Here

This superior jQuery/javascript plugin is developed by simeydotme. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.