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!

Must Read: Splitting DOM Elements Into Animated Canvas Particles | Disintegrate.js

How to make use of it:

1. Download and import the Sparticles.js library.

<!-- 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.

// 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 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
instance.destroy();

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

// reset all the particles
instance.resetSparticles();

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.

Related Posts

Confetti-Falling-Animation-Effect-party

Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…

jquery-cookie-consent

Simple jQuery Cookie Consent Plugin

jquery.cookie-consent is a simple jQuery plugin to request consent to use cookies. An easy-to-use and highly customizable cookie consent bar that informs your visitors of the use…

Timepicker-Plugin-for-jQuery

Timepicker JavaScript Plugin for jQuery Inspired by Google Calendar

jquery.timepicker is a lightweight jQuery timer plugin inspired by Google Calendar. It supports both mouse and keyboard navigation and weighs 5.5KB minified and compact. Features: Highly customizable…

angular-ngx-carousel-slider

A Lightweight, Touchable, and Responsive Angular Universal Carousel Library

ngxCarousel is a lightweight, tactile, and responsive library for creating an angular carousel. No dependencies, no more hammer. Must Read: Angular Responsive Image Slider With Lightbox Popup…

vue-fullpage-modal

First Mobile Full-screen Modal Popup Library For Vue

Vue full-page modal is a responsive, mobile-compatible, screen-friendly pop-up library for Vue.js. Must Read: Modal Component Is Written in Vanilla JS | ensemble Modal How to make…

random-number-picker

Generate a Random Number Picker In Vanilla JavaScript

Random Number Picker is a Vanilla JS-based number picker that allows you to generate a random number within a specified range. Must Read: Generating Lottery Numbers Using…

Leave a Reply

Your email address will not be published. Required fields are marked *