Awesome background animations with particlejs

particlesjsjavascriptbackgroundanimation

Awesome background animations with particlejs Tutorial by Mirko Zovko | 08. Jun. 2020.

Create best background animations with particlejs


One of the best and most used libraries for background animations is particlejs library. In just a little time you can make awesome background animations that look really good that also have interactivity options which are very interesting and can hold your visitor on your page only because of it.

On their official site you can find amazing examples with which you can play, change settings of the animation and export it when you finish with it. And just like that you already have your background animation ready for your page.

In this article I’ll show you how you can use particlejs for your background animation and a few animations that I created with that library.


Installation of the particle.js


There is few different ways how you can import the script in your project.

You can use:

For mine example I'm using cdn and all examples are in jsfiddle so you can easily modify it and play with it.


Example 1 - particle.js, different colors nodes with line connections




In the code snippet below you can read explanations of the setting in json file for background animation.



Example 2 - particle.js, different sizes nodes without line connections, snow




Example 3 - particle.js, different sizes nodes, color and opacity nodes without lines, stars



As I told you before, you can also play with particlejs background animation and change all settings on their official site and when you finish with it and you like it, you can download configurations file. Configuration file is in json format, and you just have to add it in your script to make it work.


particles.js


If you have in mind some different, better js library for background animations, or you have some other suggestions, feel free to write it in comment and maybe next article will be about that :) Hope you like it and enjoy. :)