R3F - Horizontal scroll with changing backgrounds?

Questions
,
1

Hey!

I stumbled across this amazing website: https://canals-amsterdam.com/. I want to try to recreate something similar by using the code from this sandbox (at this point a huge thanks for drcmda for making these!!).

If possible I thought of using these cool font showcases as background for each section of the page scroll. However, as you can imagine by embedding them as an image (<Image position={[width * w, 0, -1]} scale={[width*1.5, height*1.5, 1]} url="/Font_Background.png" />) the quality is noticeably worse and not dynamically scalable for different Browser windows/mobile screens.

Does anyone have an idea how I could set these images as section backgrounds using @drei’s scrollcontrols?

Any help is greatly appreciated :)!

2

some example using text + images with scroll controls, which allows you to mix html and webgl. your background could be these gigantic fonts, foreground the images.

plain old vertical scroll

vertical scroll with objects that react to intersection

infinite horizontal scroll

finite horizontal scroll with tiles

3

you can either use SDF text: GitHub - pmndrs/drei: 🥉 useful helpers for react-three-fiber
or just html, like the demos above. i would prefer that because dom text looks the cleanest. in any case i would avoid displaying text as an image.

4

Thanks a lot for the quick response! Because the font is edited I found the best way to have these things as background is to convert them to an SVG file (That’s what he did in his website). Now I just have to figure out how to set the z-position accordingly in the <scroll html> component. Do you happen to know any tutorial that shows how to set the scale of the images like those in the sandbox so that they scale dynamically when on mobile vs. desktop? In the sandbox they just seem to get reduced in width.

5

Hi i’m glad i found this discuss. I’m trying to create something similar but with shader. I’m trying to clone this https://blobmixer.14islands.com and i already made blob. Now i’m focusing on that Scroll text animation and i tried to do it without drei scroll(because i didnt know it yet) and its not working as expected. Can you take a look and tell me how to improve it ? or completly change if needed. Because it’s shader material with texture i dont know how to scroll it while doing the twist animation.
This is my clone website: https://blobmixer-r3f.vercel.app/
This is my github repo: GitHub - TurbatBay/blobmixer-r3f: This is clone website of : https://blobmixer.14islands.com/

Edit: One thing that im stuck at is that snap between section how to accomplish that ?