Need help with paralax scrolling

Design help Animations & Interactions
1

All the posibilities webflow has to offer has inspired me to create something different and creative.

I want to make a website with a paralax scrolling effect. Basically I want the page background to be a picture. As you scroll I want the background to pan over the image, making it look like you’re making some kind of Journey over the picture. I have included the picture I want to use.

I have marked the 4 different positions I want the background to be, starting at post 1 making it’s way all the way through to nr 4. I also used arrows to indicate the way I want to go. Is there a way to smoothly transition between the spots I have marked?

I have also made a video showing how I want the background to move while scrolling.

Thanks for your help!

CG Background Expl
CG Background Expl1920×1387 103 KB

Here is my public share link: LINK
(how to access public share link)

2

Hey @Nanouck_Tits

Is this close to what you are trying to achieve? Webflow - Vukic Workshop Project

3

Yeah, instead of the gradient I need it to be my picture. The blue rectangles represent your screen. So imagine you’re zoomed in and you can only see what’s inside the rectangles

4

You can check now I think it’s about what you are looking for @Nanouck_Tits

5

Hey Thanks, I have made a video to make it more clear how I want the background to move. 2023-01-31 11-42-59.mkv on Vimeo
So what you see in the video is how I want the background to move while scrolling down the page.

I know how to change the colour of a background while scrolling, but I need to find out how to move the background to these exact positions on the picture, if it is even possible to do it like that.

  1. A diagonal move down to the right
  2. On the same X-axis I want to picture to move all the way to the left next
  3. Move back diagonally down to the right for the last position