smallio
(Will Small)
August 16, 2017, 11:13pm
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:
Grateful for any input whatsoever!
All the best,
Will
1 Like
samliew
(webflowexpert.com)
August 17, 2017, 12:24am
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
2 Likes
smallio
(Will Small)
August 17, 2017, 12:29am
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
Seriously though, thank you.
smallio
(Will Small)
August 17, 2017, 12:38am
4
@samliew Just looked on github & couldn’t find anything like what I found on codepen/css desk.
Are they more complicated to implement?
samliew
(webflowexpert.com)
August 17, 2017, 12:54am
5
Then manually do this
samliew:
JS is usually placed in the Footer Code.
For HTML, use embed code component.
For CSS, place in Header Code.
If you need help implementing something, you can always find me here
smallio
(Will Small)
August 17, 2017, 12:59am
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
samliew
(webflowexpert.com)
August 17, 2017, 1:04am
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.
smallio
(Will Small)
August 17, 2017, 1:10am
9
samliew:
<script></script>
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
smallio
(Will Small)
August 17, 2017, 1:15am
10
Oh wow, okay it works now but stops after like 3 seconds and refreshes!
So close!!
smallio
(Will Small)
August 17, 2017, 2:11am
11
Fixed it Thanks again dude, works perfectly!
hofling
(Deniz)
December 21, 2017, 3:07pm
12
How did you do it? Sorry but I’m really struggling here
Would appreciate a step by step explanation.
samliew
(webflowexpert.com)
December 21, 2017, 9:47pm
13