Build along to create this captivating scroll effect, blending three images into one.
Let's start setting up by applying an advance CSS grid to the section,
and a layout with 2 columns and 3 rows.
Let's also adjust the column widths, setting the left one to 1.1 f r and the right one to 0.9 f r. Great.
Next, I'll set each row to 100 viewport height, making sure each row covers the full screen height.
Now let s move on to the images. I'll drag this image into the first row to serve as the background.
Then, click on stretch.
make sure the image covers the top two cells in the grid layout, and that the position type is set to sticky.
Now it's time to add images to the right column. First, I'll add the pink image to the section and set its location in the grid cells to the first row of the right column. Then, I'll stretch it to fill the space.
Set the position type to sticky and add an offset of 3vw. This way, it won't touch the top of the screen as we scroll.
I'll also set the blend mode to multiply, so that the color of the image blends with the layers underneath.
I'll add 3vw margins to all sides of the image to give it some room to breathe.
We'll do the same for the second light green image. Place it in the second row of the right column and stretch it.
Apply the same properties: add margins, set to sticky position with the same offset, and set the blend mode to multiply.
We're ready for the last image. Add the dark green one to the third row in the right column, and repeat all the previous steps.
Great, the right column is done. Now, for the left one, I'll drag in a text box and place it in the top left cell.
Set the top and left margins to 3vw and the bottom margin to 4vw. Make the position sticky with a 3vw offset, just like the images.
I'll adjust the text's blend mode to "difference" and switch its color to white to ensure visibility.
Cool, now everything's set on desktop. Let s move on to the tablet breakpoint. Switch the grid layout to rows,
Adjust the first row to have a minimum height of 550 pixels,
Delete the second and third empty rows,
and set the remaining three rows to 100vh.
Make a small tweak here and set the first row's size back to a minimum of 550 pixels.
Next, I'll unstretch the background image to set custom sizes. To ensure it covers the full width I'll set it to 100%.
In the grid cell location, position it over the first and second rows while holding shift, and align it to the top."
I'll set the height to 100vh. After that, I'll make sure the image covers the top and second rows. Great, this breakpoint is good to go."
Lastly, let's adjust for mobile. I'll make the text a bit smaller, setting it to 26 pixels on canvas.
Make sure the background image is set to 100% width and 100vh height, just like on the previous breakpoint.
I want the images to be smaller and placed in the bottom right corner, so I'll unstretch the pink image and place it there.
I'll set the bottom and right margins to 3vw.
and let s do the same for the light green image: unstretch it, position it at the bottom right with margins, and add a 30 vh offset.
Finally, let's repeat all these steps for the dark green image.
If you want the images a bit bigger, simply adjust their size to 80% width and 525 pixels height...as I m doing here to all three images.
And that's it! Our site is ready. Let's take a look at the entire design. Starting with the desktop view, you'll see how the images blend smoothly into one as you scroll. And on the tablet view, the text also blends with the images. The same applies for mobile. see? Everything blends seamlessly across all breakpoints.
To learn more about what you can do with Wix Studio, check out the Wix Studio Academy.
