Particles effect background animation

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”>
<head>
<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”>

</head>
<body>

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

</div>
</div>

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

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

</body>
</html>

View Demo ➧ Download ➧

Leave a Comment