[Mini-Tutorial] How to Integrate Particles.js in Webflow

Community resources Webflow Tips
1

Hello Webflow community,

Here’s a mini-tutorial on how to integrate Particles.js by Matt Boldt in Webflow and turn your presentation into beautiful, living, interactive and highly customizable master piece.

You can find it here: http://particles-js.webflow.io/

You can also clone this to your project at my profile.

Shoutout to @SidneyOttelohe - Sidney, I used your site and credited you, hope it is alright! I am not affiliated with particles.js, but I find it really great, so filling in the tutorial gaps.

Take care,
Jaroslav

7 Likes
2

Nice!

I’ve begun designing a site for my business and have integrated Particles.js too.

Here’s a page from the site that you can check out to see how I’m using it with a space theme.

http://dark-nebula.webflow.io

Beware! This is still a work in progress: styles are broken, images unoptimised etc.

2 Likes
3

Thank you @Phoxic - what an inspirative way to implement particles at your example!

I like it, very subtle yet sympathetic and I didn’t even know you could make them stars-like. Like!

4

This helped me so much!

Thank you! :smiley:

1 Like
5

Hi,

I made it however, I have 2 CTA’s on the hero thst stopped working, since the particles js has a click option guessing if that disabled the actions of the links.

Any thoughts? Thanks

2828×568 121 KB

6

Hello Carlos94587, thank you for your question.

Solution is simple:

  1. select your CTA button
  2. set position of button to Relative (in styles tab)
  3. set Z-index of button to any high number, let say 999. Z-index is located also in Styles tab if you choose element position to relative or absolute.

If you do not want to mess with your button position, you can select the layer, set the relative or absolute position to it and set this z-index to very low number.

What you need to achieve is to position CTA buttons ABOVE the layer with particles.

Hope it helped!

You can check http://notix.webflow.com - here is it implemented with CTAs. However, please make sure you follow steps above.

Jarda