Author: | asifbacchus |
---|---|
Views Total: | 4,990 views |
Official Page: | Go to website |
Last Update: | April 17, 2020 |
License: | MIT |
Preview:

Description:
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; }