Particles.js
It’s been a long time since I promised to get my hands dirty with the wonderful things we can do with canvas.
Today I had a little taste of the power of the canvas concept. I chose to use a really beautiful library: Particle.Js
It was a very exciting experiment. My demo is really essential but I realized that it has an immense potential for projects in which you want to make the most of design as an art form to communicate and to create different... atmosphere.
After all, the concept of canvas is nothing more than an explicit reference to a white canvas that can be filled with what we want...
So, with Particle.Js it is really simple to have in your hands working, stable, clean, customizable code.
Simply edit your canvas from the tool that Vincent Garreau (Particle.Js author) made available and publish it on Codepen. From here you can use the Javascript, Css and HTML parts in your project.
The rest is built within the div that hosts the canvas.
You can set all the settings related to the number of items you want, the interactions on hover, on click and the ways in which our items must react to these events.
The particles are perfectly customizable and even the base of our canvas can be used with simple CSS or a background image.
Particle types can be chosen from a dropdown that offers default particles, NASA, Bubble, Snow, Nyan Cat.
Particle.Js has 24,899 stars at the moment (including mine!), 282 issues and 4,400 forks and is licensed under MIT.
1) Include CDN library in you HTML file and use the
<div id="particles-js"></div>
to grab you HTML content
2) Create you own custom particles canvas using the page tool at https://vincentgarreau.com/particles.js/
3) Publish it on Codepen using the Codepen button on the top right
4) In you custom JavaScript file copy that Codepen result (same for CSS)
You can find my Demo on Codepen and GitHub
The only flaw that this library has is that it is no longer maintained 😢, but wait! We have a wonderful solution 😎 ❤️ !!
tsParticle.js
tsParticle.js is a library with an implementation really similar to Particle.js (so there is not much different or complex than the previous one, really!!), with new features and very well maintained, created by @matteobruni and released under MIT license and... it's also wonderful ✅!
In order to understand how to implement it, we have a beautiful documentation on Github.
Matteo writes in his article:
[...]I’ll show you some reasons to replace particles.js with the new tsParticles.
tsParticles are fully compatible with the particles.js configuration. Seriously, you just need to change the script source et-voilà you're ready.
tsParticles have a frame per second (fps) limiter, so they don’t let the CPU client suffer more than necessary.
tsParticles have a lot of new features.
tsParticles development is active. [...]
We can find some great examples with tsParticles also on Codepen, just to give you an idea of the potential and you can implement it with Vue, React and even Angular. For Wordpress there is no plugin but you can use tsParticle through Premium Addons for Elementor (in the Premium Particles Add.on section).
I hope that you too can try to have fun with tsParticle.Js, and that you create beautiful patterns for your projects!😊 😊
Top comments (11)
You should try tsParticles, an improved version of the abandoned particles.js
matteobruni / tsparticles
tsParticles - Easily create highly customizable particles animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.
tsParticles - TypeScript Particles
A lightweight TypeScript library for creating particles. Dependency free (*), browser ready and compatible with React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Riot.js, Solid.js, and Web Components
Table of Contents
Use for your website
Official components for some of the most used frameworks
Templates and Resources
Demo / Generator
Migrating from Particles.js
Plugins/Customizations
Do you want to use it on your website?
Documentation and Development references here📖
This library is available on the two most popular CDNs and it's easy and ready to use, if you were using particles.js it's even easier.
You'll find the instructions below, with all the links you need, and don't be scared by …
Oh! I'll try It for sure! Too kind! Thank you!!😊🙏
@matteobruni I will edit this article with your permission and I will write to switch to the better manteined tsParticle.js library, do you agree? I would like to link your articles on tsParticle.js. Can I?
Yes, thank you. Don’t worry, link every article you need.
Thank you very Much!!!🥳🥳🥳
@matteobruni done! Hope you like it!! Thank you again, you're a life saver 💯 !!!
Amazing :D
Thank you!!!
Wonderful! By the way why don't you embed your codepen demo in the post itself, this will be really helpful
I put the link to the Github repo and the Codepen of the demo I made, in the next article I will post the code directly to make things more comfortable for the reader, thank you very much for your suggestion!
You can still edit and post if u like