In this article, we will explain how you can to easily program a small trail of particles with particles.Js. It’s a lightweight JavaScript library for creating particles.

You can download the particles.Js library from the official GitHub site.

In my example, the HTML part looks like this:

<!DOCTYPE html>
<html lang=”en”>
<meta charset=”utf-8″>
<title>Particles effect background | Aviance School</title>
<meta name=”description” content=”particles effect background animation html,html5 canvas particle animation and parallax demo,css particle animation,particle text animation js,particle js”>
<meta name=”author” content=”aviance” />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”>
<link rel=”stylesheet” media=”screen” href=”css/style.css”>


<!– particles.js container –>
<div id=”particles-js”>
<div style=”text-align:center”>
<p class=”line-1 anim-typewriter”>Welcome to Aviance School.Thanks for visiting.</p>


<!– scripts –>
<script src=”js/particles.js”></script>
<script src=”js/app.js”></script>

<!– stats.js –>
<script src=”js/lib/stats.js”></script>
var count_particles, stats, update;
stats = new Stats;
stats.setMode(0); = ‘absolute’; = ‘0px’; = ‘0px’;
count_particles = document.querySelector(‘.js-count-particles’);
update = function() {
if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {
count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;


View Demo ➧ Download ➧