How was this made?!

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?

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

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:

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?

Tried that a few weeks back =)

http://particlesjs.webflow.io

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

1 Like

Thanks for sharing Jorn! This is super neat!

1 Like

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

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

1 Like

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

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

2 Likes

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

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