{"id":37694,"date":"2017-08-18T18:01:40","date_gmt":"2017-08-18T10:01:40","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=37694"},"modified":"2017-11-26T01:59:52","modified_gmt":"2017-11-25T17:59:52","slug":"animated-particles-js","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/animated-particles-js\/","title":{"rendered":"Create Beautiful Animated Particles with This Javascript Library"},"content":{"rendered":"

There are tons of free animation libraries<\/a> all with different effects and specialties. But, the new Particles.js<\/a> library goes a totally new direction by creating animated particles<\/strong> that move in real time<\/strong> all over the page.<\/p>\n

This easy-to-use library is completely free and open-sourced on GitHub<\/a>. It certainly won\u2019t help you improve the UX of your site<\/a> but it can help you add some interlaced particle effects<\/strong> to the background.<\/p>\n

On the main page<\/a>, you\u2019ll find a live interactive demo<\/strong> where you can play around with the library\u2019s features. This lets you adjust the particle size, speed, shape, color, position, you name it.<\/p>\n

Read Also:<\/strong> 30 Cool CSS Animations You Have To See<\/a><\/p>\n

\"Particles.js<\/a><\/figure>\n

As this is such a detailed library, it does require a good understanding of JavaScript<\/strong> to get it working. That\u2019s why this live demo is so valuable because it lets anyone play around with these settings to see what\u2019s possible in JavaScript.<\/p>\n

And, if you\u2019re okay with exporting these graphics you can save the images directly<\/strong> from the web app demo page. You can export a raw PNG<\/strong> or even save all your custom settings<\/strong> into a JSON file which then imports directly into the Particles.js script.<\/p>\n

By default, you can pick from a small handful of themes<\/strong> with different particle styles:<\/p>\n