How to create stunning particle effects in Webflow?

Programming libraries exist for a reason. If someone has already come up with a good-looking idea, it’s generally easier to make use of this code instead of wasting your time reinventing the wheel. 

In this post, we’re going to discuss how you can make use of a JavaScript library for creating particles. What exactly are these particles, you may ask? They could be any interactive elements that hover on your page and that you may be able to interact with.

Let’s explain the idea with some examples, shall we? We’ll use Particles.js library created by Vincent Garreau, a front-end developer and a co-founder at LiveStorm. This library gives you the possibility to configure a whole bunch of effects. Here’s the full list from its configuration panel:

Here are example configurations to give you an idea of what you can create with particles. 

This project differs only in the number of particles:

Here’s another example. This one differs in the particles’ size and opacity:

Apart from the size, you can also adjust what happens when you hover on the page and how the particles interact with your cursor: whether they get closer to it, or escape from it, and how they move: upside, downside, or just float around.

It is also possible to change the particles’ shape and turn them into dots in the shape of snowflakes, stars, circles, triangles, polygons, or stars.

Now that you probably get the idea of how many settings you can configure and what various configurations may look like, let’s have a look at some use cases.

Particles.js is a really nice effect that makes your website more interesting and interactive. We’ve selected a few inspiring ideas for you to have a look at.

Let’s start with our own homepage. In this case, particles are these tiny stars we used in the background. We’ve seen multiple times how people spend time trying to move all the particles out of the screen or hide them behind the giraffe on our homepage. You can say that an interactive homepage is more likely to get the attention of your visitors.

Apart from the Particles.js library, which we have just discussed, here are more ideas for you to browse through. All of these examples were created in Webflow. Some of them you can even clone to your Webflow dashboard, edit, and publish as your own. 

(Click on the thumbnail to go to the appropriate tab in Webflow’s Marketplace.)

‍

‍

‍

‍

As you can see, with a bit of creativity, you can also enhance drawings and graphics on your website to make them more aesthetically pleasing. You can simulate stars in the sky, bubbles in the water, animate text, or even add your own svg vector graphics and make them float around your page.

Let’s return to Particles.js library and briefly describe how you can use it for your website.

Once you’ve come up with your particle design, adjusted all the settings described in this article to suit your needs, and satisfied with the result, it’s time to copy the code and paste it into Webflow.

• Configure particles' look using the configurator.
• Download the JSON file with your settings.
• Add the generated code to a Before </body> tag section).
• On the Designer side, create a div-block with an ID (e.g. particles-js) which is going to be a container for particles
• Set a correct ID in the script, so it knows where to place the particles (e.g. particles-js).

As you can see, there are many creative ways to make use of particles and enhance your website’s look. An original idea is very likely to get your viewers’ attention and get them focused on your website’s content. 

If you feel like you need any assistance implementing particles to your Webflow website, keep in mind that you can always reach out to Webnomads and talk about both your design ideas and their implementation.