Background animation with strange scroll

Do you guys have any ideas on how these dudes made their background: https://www.gothamsiti.it/
It’s look like it just a huge background image and when user scrolls down the camera view is changing - pretty cool idea

I mean, I know that there is probably a lot of code there, but I am still interested. What are the chances that I do something similar on the webflow with almost none code experience :joy:
May be you know something like that on CodePen so I can change a little and add to the website?

Would love to hear you thoughts on this. i Appreciate your time

Hello!

Yeah, they’re definitely using a lot of js libraries.

The main ones I see that call out the effects are three.min.js, particleEngine.js (also part of three.js), and Tween.min.js. Once you find out how to use the libraries, you can insert the code needed in a DIV and apply the parallax to the HTML code blocks via Webflow.

1 Like

Thank you a lot. Is there any good resources (or videos) you know that might help me with that?

Check this out:

Pretty dope! I would learn how three.js works. It can do some crazy effects.

I am trying to implement it on WebFlow and it doesn’t work. Here is what I do:

Put coded from CSS section (from the Pen you sent) inside “head” section on Webflow between

Then Put JS code (from the Pen you sent) Before tag on Webflow.

Then, change ID of the block were I want this animation to display on “canvas”

Here is the link:
https://preview.webflow.com/preview/evgeniys-wondrous-project-6be49e?utm_source=evgeniys-wondrous-project-6be49e&preview=812a697cbf95e39b36733eed808dedd5

I am definitely missing something

Can you pass me your live link?

Here is my live link:
https://evgeniys-wondrous-project-6be49e.webflow.io/

Ah you forgot to add three.js to your project.

Throw this in your footer:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>

I did, still nothing

Can you change your DIV to a canvas tag? <canvas>

Do you mean to emded HTML instead of the DIV with code inside?

Yeah, embed a canvas tag in an html block.

I did, nothing happened. Just black screen

Can you try moving your three.js script tag above your custom js? I’m still seeing a three.js not defined.

Still the same:

https://preview.webflow.com/preview/evgeniys-wondrous-project-6be49e?utm_source=evgeniys-wondrous-project-6be49e&preview=3dde21ca3d603cdf5d383066e6d31fd1

It’s only going to show on the live version since it’s custom code. How does that look?