CodePen Particle JS

Happy Sunday!

I tried this http://particles-js.webflow.io/ … but this is what I want
https://codepen.io/cojdev/pen/mRRbQw

The webflow tut worked when I tried it but when I try to integrate the desired look, I get nothing.

Cheers,
Mary Poppins


I guess no one’s figured it out :disappointed:

@andreswaby

Works fine for me when I tried it. Here is a preview link of the project in Webflow: https://preview.webflow.com/preview/particle-e6751b?preview=39ff548a3fa4085af3a4ba38c2ed7083

and the published version: http://particle-e6751b.webflow.io/

If you are having issues could you please explain exactly where you are encountering the issues and also share your site’s read-only link? This will help us find out what’s going wrong in your use-case.

Thanks!

Hi @justin_c,
I see you have an HTML embed, i didn’t use that. I tried recreating the HTML in webflow and was relying on the script to react to the relevant IDs (ignoring topbar, etc) as the script only spoke to “canvas” but I didn’t get that result.

I had since used the markup of the webflow tut to avoid the frustration (particles-js).
This is the project link and pushed site

I just wanted to have the script respond to the “canvas” and that didn’t happen for me when I ID “canvas”.

You’ll realize that I wanted to use this as a background for the HERO.

Thanks for the help!

@andreswaby the canvas is not a class or ID of an element, it’s an actual element itself. This means that you cannot assign a class or ID of “canvas” to another element and have it work.

In the original tutorial, an element with an ID of “particles-js” is used. However, in your codepen example, the functionality is different. That example doesn’t seem to use the particle.js library at all, and specifically targets the canvas element
(e.g.: <canvas …, not an element with an ID or class attribute like <div id="canvas" …).

So, in order to have that specific codepen example to work you would need to use an HTML embed in Webflow since (at the moment) the Webflow designer doesn’t support the canvas element.

Please let me know if this helps

1 Like

@justin_c is correct. Helped bold the important parts and added example.

Thanks @justin_c,
If I should use the HTML embed then I would simply loose using the canvas as a background as this wouldn’t be able to hold any div elemets within it for a Hero section. Right?