An easy way to make your website sexy with particle backgrounds.
I made this script to make my website look "modern". I decided to release the script to improve it from time to time.
Main features :
- Highly customizable,
- Easy to install,
- Pure javascript (no dependencies),
- Lightweight,
- Compatible with all browsers.
Example : my website
- Download the lastest version.
- Include the script in your HTML.
<script src="path/particles.js"></script>
<!-- or -->
<script src="path/particles.min.js"></script>- Add a canvas in a container where you want the particle background to be. The canvas will automatically be scaled with the parent container.
<!-- Here, the canvas will fit the <div> container -->
<div>
<canvas id="canvas-id"></canvas>
</div>- Execute the script. If you don't know where to put this, put it just before the
</body>tag.
<script>
(function() {
let particlesHandler = new ParticlesHandler("particles-canvas");
particlesHandler.start();
})();
</script>- Here are all the functions that you may use :
| Function | Description |
|---|---|
| ParticlesHandler(canvas-id, settings) | It creates the class attributes. |
| start() | If first call : it initializes the particles with the settings (if set), and starts the loop. Otherwise it resumes the loop. |
| stop() | It stops the loop (all the particles are frozen). |
| onResize() | Force canvas to resize with parent container. |
| settings | Getter and setter to update any settings in real time. The values are validated before being applied (the process is optimized). |
- Go to the github wiki for more details.
To simplify the customization, we use an object written this way :
let settings = {
// General settings
disableOnMobile: -1, // If set to true (1), the script is disabled for mobile users
// Handler settings (-1 = default)
amount: -1, // number of particles
amountMin: -1, // min number of particles (useful if dynamicAmount is set to true)
amountMax: -1, // max number of particles (useful if dynamicAmount is set to true)
dynamicAmount: -1, // if set to true (1), the particle amount changes proportionally with the new window size
tolerance: -1, // distance from which lines will be drawn
lineWidth: -1, // width of the lines between particles
// Particles settings (random between min and max, both included)
// the size of a particle
sizeMin: -1,
sizeMax: -1,
// position of a particle
positionXMin: -1,
positionXMax: -1,
positionYMin: -1,
positionYMax: -1,
// speed of a particle
speedMin: -1,
speedMax: -1,
// direction of a particle (in radians)
directionMin: -1,
directionMax: -1,
// color of a particle (HSL color from 0 to 360)
colorMin: -1,
colorMax: -1,
// Interaction settings (if the mouse goes in or out of the canvas)
multiplierIn: -1, // multiplier if the mouse is in the canvas
multiplierOut: -1, // multiplier if the mouse is out of the canvas
// Color of springs
springColorR: -1, // spring color (RED) >=0 & <= 255
springColorG: -1, // spring color (GREEN) >=0 & <= 255
springColorB: -1 // spring color (NLUE) >=0 & <= 255
};Then, add it to the ParticleHandler constructor :
let settings = { }; // customize everything in here
let particlesHandler = new ParticlesHandler("particles-canvas", settings);
particlesHandler.start();| Setting | Description |
|---|---|
| disableOnMobile | If set to true (1), the script is disabled for mobile users |
| amount | The amount of particles |
| amountMin | The min amount of particles (useful if dynamicAmount is set to true) |
| amountMax | The max amount of particles (useful if dynamicAmount is set to true) |
| dynamicAmount | If set to true (1), the particle amount changes proportionally with the new window size (if a resize event is caught) |
| tolerance | Distance from which lines between particles will be drawn (in pixels) |
| lineWidth | Width of the lines between particles (in pixels) |
| sizeMin | The minimum size of a particle (radius in pixels) |
| sizeMax | The maximum size of a particle (radius in pixels) |
| positionXMin | The minimum X position for a particle (in pixels) |
| positionXMax | The maximum X position for a particle (in pixels) |
| positionYMin | The minimum Y position for a particle (in pixels) |
| positionYMax | The maximum X position for a particle (in pixels) |
| speedMin | The minimum speed of a particle (in pixels per animation request divided by 1000) |
| speedMax | The maximum speed of a particle (in pixels per animation request divided by 1000) |
| directionMin | The minimum direction of a particle (in radians) |
| directionMax | The maximum direction of a particle (in radians) |
| colorMin | The minimum color of a particle (HSL color from 0 to 360) |
| colorMax | The maximum color of a particle (HSL color from 0 to 360) |
| multiplierIn | The minimum multiplier of a particle (when the mouse is over) |
| multiplierOut | The maximum multiplier of a particle (when the mouse is out) |
| springColorR | Spring color (RED) >=0 & <= 255 |
| springColorG | Spring color (GREEN) >=0 & <= 255 |
| springColorB | Spring color (NLUE) >=0 & <= 255 |
Things to know :
- Default value : If you want the default value, leave "-1" to the setting concerned.
- Min max : A value is taken randomly in [min; max] range (both min and max are included). Put same value as min and max if you don't want a random value.
- Multiplier : It is used to give a "dynamic" look to the particles. You can change the effects when the mouse is in or out of the canvas.
- Colors : Initially, the color of all the particles is white since their luminosity is set to 100%. But further is the multiplier from 1.0, darker the particles are. So the particle colors can be seen when the mouse is over the canvas. This feature will be customizable in the next versions.
General troubleshooting : To troubleshoot, use verbose = true in the ParticlesHandler constructor. If you do not have a settings variable, put undefined instead.
let particlesHandler = new particlesHandler("canvas-id", settings, true);Everything will be written in your browser console. If an error occurred, everything will be explained.
I want my canvas to be behind an other container: To do so, you have to add these css lines to your canvas container :
#canvas-id{
position: absolute;
left: 0px;
}My canvas is initially not adjusted to its parent container: This is probably due to the fact that you are generating elements dynamically. The canvas retrieve the parent size before the addition of these new elements, so the size is bad. To fix it you can either :
- Call
particlesHandler.onResize()once that the new elements are set up in the parent container, - Initialize
particlesHandleronce that the new elements are set up in the parent container.
To be sure that everything is loaded you can use :
- A Javascript event listener :
window.addEventListener('load', function() {
// Init particles handler here, or call onResize()
});So your code should look like this :
<body>
<!-- HTML code ... -->
<script>
(function() {
window.addEventListener('load', function() {
let settings = {
// put your customizations here if you changed anything
};
let particlesHandler = new ParticlesHandler("particles-canvas", settings);
particlesHandler.start();
// If you want to update the settings in real time
// (to animate the colors for example):
let i = 1;
let gradient = function(){
let settings = particlesHandler.settings;
settings.colorMin = i;
settings.colorMax = i;
particlesHandler.settings= settings;
i++;
if(i > 360) i = 0;
};
setInterval(gradient, 20);
});
})();
</script>
</body>More help will be provided in the future...
You can contribute to improve the project as long as your code is clean. I am not a Javascript specialist, I don't know the conventions or anything. Fork the project, and make a pull request, and I will check it as soon as possible.
- Lilian Gallon (N3ROO)