Easy Particle Animations In JavaScript – ab-particles

Category: Animation , Javascript | April 17, 2020
Views Total:4,652 views
Official Page:Go to website
Last Update:April 17, 2020


Easy Particle Animations In JavaScript – ab-particles


ab-particles is a lightweight JavaScript library that makes it simple to create interactive particle animations as a background of any container.

How to use it:

1. Create a canvas element to hold the particle animations.

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

2. Load the minified version of the ab-particles library.

<script src="js/ab-particles.min.js"></script>

3. Render a default particle animation on the canvas element. That’s it.

<body onload="particles()">

4. Create a bubble particle animation.

particles(noBounceV=true, speedV=-100, speedH=-15,connections=false, avoidMouse=false, hover=false)

5. Create a snowflake particle animation.

particles(noBounceV=true, speedV=100, connections=false, avoidMouse=false, hover=false)

6. Create a starry night particle animation.

particles(speed=0, connections=false, avoidMouse=false, hover=false)

7. Or create your own particle animation using the following parameters:

  • opacity: Opacity level of particles
  • numParticles: The number of particles
  • sizeMultiplier: Random multiplier
  • width: Stroke width of connection lines.
  • connections: Shows connection lines.
  • connectionDensity: Density of connection lines.
  • noBounceH: Particles do not bounce off the left or right sides of the window.
  • noBounceV: Particles do not bounce off the top or bottom of the window.
  • speed: Animation Speed
  • avoidMouse: Should particles be repelled away from the mouse?
  • hover: Enable mouse interactions
// defaults
particles(opacity=100, numParticles=10, sizeMultiplier=5, width=1, connections=true, connectionDensity=15, noBounceH=false, noBounceV=false, speed=50, avoidMouse=true, hover=true)

8. Override the default CSS styles of particles.

:root {
  --col-particle: #536878;
  --col-particle-stroke: #035096;
  --col-particle-stroke-hover: #0892d0;

You Might Be Interested In:

Leave a Reply