Streaming live at 10am (PST)

JS, CSS & HTML - Where to put each one?


#1

What’s up guys,

I’m trying to embed something like the green particle animation this into my site - https://www.craftedbygc.com/

I’ve read EVERYTHING I can find about this on various parts of this forum & beyond, including this tutorial http://particles-js.webflow.io/ (which works great until I change to a Codepen animation with all 3 languages.

Can anyone could explain where each one of these go & how to wrap them properly etc? I think it would be very beneficial for someone to explain this in depth once and for all & then repost it somewhere for all users to see.

Here’s the example I’m working from:
http://cssdeck.com/labs/interactive-particle-logo

Grateful for any input whatsoever!

All the best,
Will


#2

In Webflow, JS is usually placed in the Footer Code.

For HTML, use embed code component.

For CSS, place in Header Code.

Using jQuery plugins that are hosted on Github


Also, feel free to contact me for further code help and/or customization of third-party plugins


#3

Not all heros wear capes.

Had a little inception moment after glancing at the reply, swap the a & m in your name and we become one :stuck_out_tongue:

Seriously though, thank you.


#4

@samliew Just looked on github & couldn’t find anything like what I found on codepen/css desk.

Are they more complicated to implement?


#5

Then manually do this

If you need help implementing something, you can always find me here


#6

@samliew Okay I tried that & I tried wrapping it like you did but the CSS just showed on the page.

I’ve copied all of them in the right positions. What am I doing wrong here? I’m assuming tags/wrapping but I’m not sure exactly.

Here’s the live site -
http://javascript-testing-6bb782.webflow.io/

Here’s the preview -
https://preview.webflow.com/preview/javascript-testing-6bb782?preview=110ca2d20bbe76ee90429b299ae45f66

Totally wrong or close?

Thanks again,
Will


#7
  1. You cannot use LESS, SCSS, or SASS with Webflow. Switch the Codepen CSS view to Compiled CSS then copy that instead.

  2. Wrap CSS code between <style></style> tags.

  3. Wrap JavaScript code between <script></script> tags.


#8

I just noticed that is not Codepen, so you have to manually convert it to CSS by hand or use a LESS compiler to change the LESS CSS code to plain CSS.


#9

Okay I tried a different example using codepen just so I can learn the basics before I convert by hand.

Looks like I am nearly there, It’s just the particles missing - http://javascript-testing-6bb782.webflow.io/

For the record I’m using this now to try it out - https://codepen.io/soulwire/pen/Ffvlo?page=4

Thank you for all your help, I think I’ll be coming to you for some complicated changes I can’t do in the future as your rates look really reasonable.

Cheers,
Will


#10

Oh wow, okay it works now but stops after like 3 seconds and refreshes!

So close!!


#11

Fixed it :slight_smile: Thanks again dude, works perfectly!


#12

How did you do it? Sorry but I’m really struggling here :smiley:
Would appreciate a step by step explanation.


#13

Please ask a new question if you have an issue. Don’t forget to explain what you are trying to do.