Embed simple javascript code

[Siton_Systems (Ezra Siton)]

Try this:

PARTICLES EFFECT - How to integrate Particles.js in Webflow - Webflow

And this:

How to integrate this JS animation into Webflow

Add the js before the body. Custom code in head and body tags | Webflow University Add canvas (custom HTML - no canvas element by drag-&-drop): Custom code | Webflow University CSS - be careful from CSS conflicts (don’t copy and paste the CSS code for H1/html and so on - add styles from webflow editor) add div - wrapper for style (bg color - flexbox align for h1/p and so on): wrapper — canvas — h1 — p /wrapper That’s it. It will work only on you’re publish site (not in prev…

Also read Particles.js docs.

codepen

In general codepen to webflow:

The html box (You should create this structure by webflow site tree) and add classes and #id like the example you find
The CSS box - you should add the CSS (copy paste) and wrap with <style></style> + If the “box” is sccs (SASS) you should first use [SCSS to CSS Compiler] (https://www.cssportal.com/scss-to-css/) - (Or create the same styles/ideas by webflow CSS).
The JS box - copy paste before body and wrap with <script>/*code her*/</script> tag

External resources JS -or- CSS:

wrap with script and src - example:

<script src="https://cldup.com/S6Ptkwu_qA.js"></script>

For the CSS the same idea but other syntax:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css">

HTML Styles CSS

Always put the src “before” the code you copy-paste from the JS-box (The asset should load first) + Do not load jquery (Webflow already load this libary)