Streaming live at 10am (PST)

Background animation with strange scroll

#1

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

#2

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
#3

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

#4

Check this out:

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

#5

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

#6

Can you pass me your live link?

#7

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

#8

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>
#9

I did, still nothing

#10

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

#11

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

#12

Yeah, embed a canvas tag in an html block.

#13

I did, nothing happened. Just black screen

#14

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

#15

Still the same:

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

#16

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