Streaming live at 10am (PST)

How was this made?!


#1

https://www.tradingview.com/ On the homepage of this site they have an awesome interactive background. Any idea how could this be made in Webflow or would this have to be custom code?


#2

Lots of custom code. Here's the link to the actual script (search for js-background-canvas)

https://s.tradingview.com/static/bundles/index_search.35300c87365725c098ea.49663ecb7a26.js

Seems like it was "borrowed" from here


#3

Its actually not that difficult as someone has created the JS plugin already https://github.com/VincentGarreau/particles.js/ Of course you need a little knowledge of how to set it up but dont get intimidated :slight_smile:


#4

Thanks for the info!! And thanks for the link @samliew a haaa! I new it. I was thinking, I've seen this animation/script before in other sites. So basically I just have to learn how to setup the JS plugin with my webflow site and learn how to tell it to use the ID/ div I make for the background? If it's not too much to ask could you perhaps make a tutorial on how I could do this?


#5

Tried that a few weeks back =)

http://particlesjs.webflow.io

Here'e the designer link:
https://preview.webflow.com/preview/particlesjs?preview=2237820148190634ce2a77612ef625ee


#6

Thanks for sharing Jorn! This is super neat!


#7

Could you walk me through the steps on something like this?


#8

Take a look at designer link and see if you can make use of that.


#9

I came across this a couple of weeks back now and got it all working on a static HTML file but I had it set up differently as in I had the .json settings file separate to the rest of the code like you have so just wondering, if you download a .json file from the playground configurator then how exactly do we paste that into your code just to keep things nice and simple?

I tried pasting my .json configuration into your code in about 3 different places now and each time it fails so I guess my question is how did you do it? :wink:

Thanks,

Mark


#10

http://svz-design-official-website.webflow.io/ Starting to play around with it, Thanks!


#11

I like the colour change. Very nice.

How did you incorporate your own .json settings file if you don't mind my asking?

Thanks.

Best wishes,

Mark


#12

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.