Hey guys, I’m not new to webflow, but I am new to playing with custom code.
Anyway, I’m trying to integrate this codepen: https://codepen.io/damyan/pen/XVeraw into my project as a background to the hero section.
Here’s my webflow page: http://nie.webflow.io/
I found someone on the forum explaining how to integrate particles.js, but I am not sure this would work the same way?
Hi @Gaitanov
I’m not sure you can integrate this script the same way you would integrate Particles.js.
Go into the webflow designer and add an embed widget where you want your animation to appear.
In your embed, add the following libraries before your script:
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/fdefb19b/examples/js/renderers/CanvasRenderer.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/fdefb19b/examples/js/renderers/Projector.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/fdefb19b/examples/js/renderers/CSS3DRenderer.js"></script>
You can then add your codepen script just below these librairies, inside script tags (still inside your embed).
Sometimes there’s an issue with some blank space at the bottom of the canvas. To avoid this issue, you can go into your site settings > custom code > And in the “head” code add the following:
<style>
canvas {
display: block;
max-width:100%;
}
</style>
Let me know if this works.
Best
Hey @Blaise_Posmyouck
Yeah this worked like a charm. Thanks!!!
Only issue now is that the canvas positions itself weirdly in the middle of my page, for some reason.
