Advice needed: How would it be possible to embed this code snippet?

Design help Custom code
1

Hi everybody,

I’d like to use this JS http://vincentgarreau.com/particles.js/ and add it to the following webflow page http://www.geekwrapped.com/ essentially replacing the blue top background image.

The first link has the option to download the json file. How would it be possible to add this to Webflow?

Thanks for your help!

2

Paste this in Page Settings > Code > Footer Code

<script src="https://raw.githubusercontent.com/VincentGarreau/particles.js/master/particles.min.js"></script>
<script>
particlesJS('Top',
  // JSON goes here
);
</script>

See particles.js/particles.json at master · VincentGarreau/particles.js · GitHub for an example of the json config.

1 Like
3

Thank you very much for your help @samliew

After I paste the code in the footer, how do I add the animation to the top (hero) section (see the blue galaxy background on the top at www.geekwrapped.com which I want to replace with this…).

Thanks :slight_smile:

4

See particles.js/particles.json at master · VincentGarreau/particles.js · GitHub for an example of the json config.

Copy and replace the part where it says

  // JSON goes here
1 Like
5

Thanks @samliew . The link doesn’t seem to work (404).

6

Oops, accidentally copied the [1] from the previous post.

1 Like
7

Ok I think I get now what you mean @samliew

I use the code you pasted and then add the .js code from the link in the right spot. thank you!

But how do I position it on the page to be a background “image” on the top of a page, eg. here (replacing the blue star background): www.geekwrapped.com or on this page http://www.geekwrapped.com/remote-control-planes-rc-airplanes replacing the sky?

Thanks for your help, really appreciate it.

8

I have no idea, it should just work if you have followed the instructions correctly. Maybe you need to remove the existing background too.