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 instance.destroy(); // set the canvas size instance.setCanvasSize( width, height ); // reset all the particles instance.resetSparticles();
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