How to add particles.js to site

Hello, can someone help me add the Particles.JS to my site? No helpful videos on youtube. https://vincentgarreau.com/particles.js/ Thank you

-drip

My guess is you're going to have to use a bit of Custom Code blocks for that. Other than that, the github on that site has the instructions for how to add it to a website. Doubtful you'll be able to just add it verbetim, but try that site and see if they will help on that. This site is more for asking questions about how to use the software Bootstrap Studio itself.

I've used it on a website built with BSS.

http://santascott61.com/

You can look at my site's source code to see how I added it.

Basically you create your particle effect on the https://vincentgarreau.com/particles.js/ website, then use the option in the upper right to view it on codepen. From codepen, you can copy the relevant JS, CSS and HTML, and add it to your BSS website.

I made a Div right after my body tag with the following CSS rules and ID...

#particles-js { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% + 30vw); z-index: 0; }

The height calculation is to accommodate the change in the area where I wanted the snow to appear, depending on the size of the screen. Below MD breakpoint, I have the Div hidden. This is a resource hog, and really not suitable for phones/tablets.

Inside the Div is a custom code block that references the particles.js file via their CDN. <script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

I did it this way because at the time, BSS didn't allow you to selectively load JS on just a single page (I'm only using this particle effect on the home page, so I didn't want to import the JS through the normal Design > Javascript > Link External JS, because then it would have loaded on every page.)

Lastly, I copied the JS from codepen and created a new JS file in Design > Javascript > New > JS file. I called it snow.js, and pasted the the JS from codepen and saved the file.

If you're not familiar with adding custom code, and sifting through the relevant bits and pieces you'll need from Codepen, you're probably not going to be able to do this yourself. But then that's why I do this stuff for a living ?

here is another example

Printminja,

Do You know why my collapse menu dosn’t push my content down? I can see its work on your Santa website when you click on the hamburger menu.

Thanks

@szecse

I can't tell without seeing your website or your .bsdesign file.

this is thank you mate

@Printninja

Your example of how to add particles.js to your website is not a good example. You skip half the example from Codepen, but in your snow.js you call a function that you have not copied. You did not copy stats.js therefore you have a reference error in your snow.js You can easily fix this reference error. If you inspect with chrome and pretty print snow.js you will see that you have an error on line 112. You can delete all code from line 111 to the end of your snow.js line 111 begins with var count_particles, stats, update;

If you’re not familiar with adding custom code, and sifting through the relevant bits and pieces you’ll need from Codepen, you’re probably not going to be able to do this yourself.

I guess that goes for you as well. LOL was a bad joke

The home of Santa Scott looks very nice, well done

@kuligaposten

Yes, I'm aware of the superfluous code in the snow.js file. Particles.js seems to feel the need to show a little default box with statistics as to the FPS and number of particles being displayed. I don't care about this (or want it on my client's site) so I simply omitted the stats.js file.

You are correct that the code should be removed from the snow.js file, since it does technically trigger an error in the browser, but since it had no effect on my ultimate goal of adding snowflakes to the client's website, I just didn't bother.

I'm not a JS coding expert, so once I get something working, I tend to leave it unless it actually causes a problem with the website loading.

@szecse

The reason your mobile dropdown is not pushing your page content down is because you have added an inline CSS rule to your NAV component of height: 90px;

Remove this and your dropdown will push your site content down as normal.

If you want to change the height of the Navbar, adjust the default padding by writing a new CSS rule in your Styles.css file. Something like...

#mainNav { padding-top: 5px; padding-bottom: 5px; transition: padding-top .3s,padding-bottom .3s; border: none; background-color: transparent; }

(I have omitted the @media (min-width: 992px) media query in this example, because this forum software acts weird when you paste certain kinds of code.)

In general, you should break the habit of using inline styles, since they are not only not best-practices, but they can cause unpredictable behavior that can make it hard to track down since you are forced to go through the HTML code line-by-line to find problems. They also assume higher specificity in terms of the CSS cascade, overruling normal behavior of components (like you Navbar.)

Basically, you need to take a course on the proper way to write CSS.

Thank you all the detail Printninja, now it works. You are right i need to learn a lot.

Regards

So I finally decided to try to get the particles on the site, and I did. They are there, and fully functioning. The only problem is, I cant seem to make them a background, and go behind text. It acts like a block and doesn't go behind my text, I try sorting it in different ways but it always shows up on top of my text, or below it. Never behind it. Please help me

@dripcity

Read the instructions I gave in the third post on this page. You have to use a div that is positioned via the CSS position rule so you can set the z-index (stacking order.)