Inserting Javascript Codepen into div

[ctraver2]

Hello,

How would I go about making this javascript codepen display in a full width div on a webflow website? I have been struggling with figuring out where to play the custom javascript and css code.

Any help would be greatly appreciated.

Best,
Christopher

Edit: Accidentally had the wrong title from a previous draft - fixed now.

[aaronocampo]

This topic has been discussed here:

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

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 th…

there you can find a tutorial on how to implement it in your site.

[ctraver2]

Thanks for linking. I got it to work, and it looks great.

[Scott_Van_Zandt]

Isn't the Particles.JS super cool?
This is what I threw together with it: http://svz-design-official-website.webflow.io/

[ctraver2]

Dang, Scott! I saw the image dot option, but didn't think too long on how I might apply it (because it's not right for my current project). But that's a super creative use of that feature - great work and great inspiration. Thank you for sharing.

[ctraver2]

@Scott_Van_Zandt May I recommend you use the z-index feature to place your particles layer on top of your header/subheader layer? That way, when you drag your mouse over the text on screen it won't interrupt the particles experience!

[Scott_Van_Zandt]

@ctraver2 Thanks for the tip!! I was thinking the same thing.. But how can I layer the particles on top without allowing them to cover the text? I want the bubble effect to still work when hovering text but I don't want the particles to lay on top of the text. Thoughts?

[ctraver2]

Oh that's a puzzle. On that note, I recommend exploring how to include the text in the foreground of the actual particles javascript. That gets screwy when we talk about positioning and CSS, but that might just be my inexperience speaking. You might know exactly how to make that happen.