Hi,
I’m trying to incorporate some particle effects on my homepage, as shown on this CodePen. I’ve created a dummy project to test it out, but I can’t seem to get the code to activate.
So far, I’ve add the code to the page settings, but nothing. I’ve gotten vanilla JS to work on smaller things, but I’m a bit stumped on this one.
Here is my site Read-Only:
Thanks!
@Curry_J_Hackett - put the html into an embed, put the css in the head area of the custom code wrapped in a style tag and the js in the before /body tag area. Please share the published site link since custom code does not work in the designer if you want additional troubleshooting.
Hi! Thanks for replying. I’ve done as you advised, but still nothing.
The published link is here: https://currys-spectacular-project.webflow.io
It looks like your missing Modernizr (which is included in the referenced CodePen):
You can omit the style code included before your tag, the last two functions (which control the sliders that modify the style) in the code before your tag and don’t worry about including a reference to the jquery-ui.js file (since I believe this is just used for the slider element).
I can’t test it myself, but whenever I omit that JS from the CodePen the effect stops—so you’ll want to make sure it’s included for your code to execute properly.
Edit: I was able to get it working quickly with the suggestions above and you can check it out here. Just make sure you include this line right above the other JS code before the tag:
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
And since you don’t the other information, just include the following in your Embed element:
<canvas id="canvasOne" width="900" height="520"></canvas>
Obviously you may want to style it differently which may require some edits to the structure, but that should get you going. Let me know if you have any issues.
Ah, thanks so much! I can understand the code at a high-level on Codepen, but didn’t know to look for the pull-down menu for those libraries.
Last question—how did your example cover the whole screen? The canvas is set at 900x520, so did you just make the body background black?
No problem! Yeah I didn’t know about those settings for the longest time but they definitely help when it comes to making sure you’re calling all the necessary prerequisites.
Last question—how did your example cover the whole screen? The canvas is set at 900x520, so did you just make the body background black?
Yep! I gave the section it’s contained within a black background color, set it to display: flex, centered the Embed child element horizontally/vertically, and then set it’s width/height to fill the entire window (100% and 100vh respectively). You can check out my read-only link here if you want to see exactly how it’s setup.
Keep in mind that smaller screens (below 900px wide) show a horizontal scrollbar, however you can easily get the canvas element to take up the entire width by removing the width="900" value and set that style with CSS (ex: style="width: 100%;"). If you’re wanting to also make the height responsive, then you’ll probably want to reference this Stack Overflow question—keeping in mind it requires a bit of javascript.
Don’t hesitate to let me know if you have any other questions/issues!