Tutorial
How To Create Background Effects with tsParticles
Introduction
Particles.js is a library that allows you to create particle effects. These are shapes and objects that are drawn onto a canvas with the capability of observing some behaviors of physics and interactivity. This can be useful for creating eye-catching backgrounds without the need for illustrations or photography.
Note: Development for the original repo appears to have stalled. A fork named tsParticles has recently been created. The content of this tutorial has been updated to use this new fork.
In this tutorial, you will be briefly introduced to some of the features of this library and loading and modifying sample configurations.
Prerequisites
To complete this tutorial, you will need:
- A modern web browser.
- Familiarity with JSON may help with understanding the configuration files. Consult An Introduction to JSON.
Step 1 — Setting Up the Project
For tutorial purposes, this example will focus on a local index.html file and a copy of the tsParticles library hosted by a content delivery network (CDN).
In your terminal window, create a new project directory:
- mkdir tsparticles-example
Then, navigate into the new project directory:
- cd tsparticles-example
Next, create an index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>tsParticles</title>
<style>
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
body {
background-color: #212121;
}
</style>
</head>
<body>
</body>
</html>
The library will require a div with an id to hook the canvas onto. Add the new <div id="tsparticles"> to the body:
<body>
<div id="tsparticles"></div>
</body>
Then, add the CDN-hosted library to the body:
<body>
<div id="tsparticles"></div>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/tsparticles/1.18.1/tsparticles.min.js"
integrity="sha512-PYHWDEuXOTJ9MZ+/QHqkbgiEYZ+LImQv3i/9NyYOABFvK37e4q4Wg7aQDN1JpoGiEu1TYZh6JMrZluZox2gbDA=="
crossorigin="anonymous"
></script>
</body>
Note: tsparticles.js is also available via npm:
- npm install tsparticles
Next, initialize tsParticles by specifying the id it should hook into (in this case, tsparticles):
<body>
<div id="tsparticles"></div>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/tsparticles/1.18.1/tsparticles.min.js"
integrity="sha512-PYHWDEuXOTJ9MZ+/QHqkbgiEYZ+LImQv3i/9NyYOABFvK37e4q4Wg7aQDN1JpoGiEu1TYZh6JMrZluZox2gbDA=="
crossorigin="anonymous"
></script>
<script>
tsParticles.load('tsparticles');
</script>
</body>
When visiting index.html in a web browser, you should observe several particles randomly scattered across the web page. Verify that everything up to this point is working as expected, and you can proceed with adding custom options.
Step 2 — Loading a Configuration
The library documentation lists many of the options that are available. These include background, interactivity, particles, and more.
First, copy default.json and paste it as particles:
<script>
const particles = {
"fpsLimit": 60,
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ff0000",
"animation": {
"enable": true,
"speed": 20,
"sync": true
}
},
"shape": {
"type": "circle",
"stroke": {
"width": 0
},
"polygon": {
"nb_sides": 5
},
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 3,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 3,
"random": true,
"anim": {
"enable": false,
"speed": 20,
"size_min": 0.1,
"sync": false
}
},
"links": {
"enable": true,
"distance": 100,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 0.8
},
"repulse": {
"distance": 200
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true,
"background": {
"color": "#000000",
"image": "",
"position": "50% 50%",
"repeat": "no-repeat",
"size": "cover"
}
};
tsParticles.load('tsparticles');
</script>
Use this new variable in your tsParticles.load() call:
<script>
// ...
tsParticles.load('tsparticles', particles);
</script>
When visiting index.html in a web browser, you should observe small circles connected with lines and traversing across the screen.
Step 3 — Customizing a Configuration
The options available to tsParticles interact and affect each other. You should experiment with adjusting values and see how they affect the particles.
Taking the particles that were defined earlier, you can modify the values of the configuration like so:
<script>
const particles = {
"fpsLimit": 60,
"particles": {
"number": {
"value": 40,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ff9800",
"animation": {
"enable": false,
"speed": 20,
"sync": true
}
},
"shape": {
"type": "polygon",
"stroke": {
"width": 2
},
"polygon": {
"nb_sides": 6
},
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 3,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": <^>20<>,
"random": true,
"anim": {
"enable": false,
"speed": 20,
"size_min": 0.1,
"sync": false
}
},
"links": {
"enable": false,
"distance": 100,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 6,
"direction": "down",
"random": false,
"straight": false,
"out_mode": "out",
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 0.8
},
"repulse": {
"distance": 200
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true,
"background": {
"color": "#ffffff",
"image": "",
"position": "50% 50%",
"repeat": "no-repeat",
"size": "cover"
}
};
tsParticles.load('tsparticles', particles);
</script>
This code change will make the background color switch to white. It also changes the shape of the particles from circles to hexagons (six-sided polygons). The number and size of the polygons have been changed. The linked lines were removed. The direction was changed from none to bottom.
When visiting index.html in a web browser, you should observe golden hexagons cascading down the page.
Experimenting with Configurations
To get a broader sense of the potential the library offers, you can look at the various Samples available on the tsParticles site.
Use the dropdown to select an interesting sample. You can use the editor on this page to modify values. Then click Reload to see the changes.
If you would like to export the changes, click More and then click Export Config. This will display the configuration in JSON format.
Note: Some of these demonstrations may require additional dependencies. For example, the Font Awesome sample requires the Font Awesome library.
Spend some time assigning these new configurations to the particle variable from earlier in your index.html and refreshing the page in your web browser.
Conclusion
In this tutorial, you learned how to use the tsParticles library (formerly Particles.js) locally.
tsParticles can be used for eye-catching backgrounds. However, you may need to weigh considerations for browser support, load times on slow networks, and performance on slower computers.
If you’d like to learn more about JavaScript, check out our JavaScript topic page for exercises and programming projects.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Get our biweekly newsletter
Sign up for Infrastructure as a Newsletter.
Hollie's Hub for Good
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Become a contributor
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
Hi @bonnieedens, yes you can do it, checkout this sample on CodePen with a particle emitter set up https://codepen.io/matteobruni/pen/vYKzovR
Hi Joshua, thanks for the tutorial! I made a particle effect with heart-shaped bubbles and I was wondering if it’s possible to set an emitting point for the particles. For example, it would be fun if the hearts bubble out of a chimney. Do you know if something like that is possible? :) Kind regards, Bonnie