Music festival site with gradient scroll

1. From the Inspector panel, set a blank section to a height that’s greater than the height of the viewport. For this design, start with 700vh. 

Note: The section height determines how long the gradient scroll will last. It needs to be more than 100vh in order to create this type of scroll effect.

2. Apply a 3X7 grid to the section. Set the width of the first and third columns to 75px, and the width of the second column to 1fr. Set each row’s height to 100vh. 

3. Under the design tab in the Inspector panel, add a gradient background to the section. 

4. Choose a linear gradient and set the angle to 180°. 

5. Change the gradient colors by selecting the color stops. Click on the slider to add more color stops. 

6. Click and drag the color stops across the slider to adjust the distances between color changes.

7. From the Add panel under Media, upload 2 images to use for the background: an image with a transparent center, and a cropped version that’s the upper third of the image. The cropped image works as a “mask” to create the scroll effect. 

8. Add the full image to the first grid row in the section. Position and stretch it to the full width and height of the row, covering all 3 cells. Change its position type to Sticky. 

9. Add content to each of the remaining grid rows. Position the content so it will be centered over the circle on scroll. 

10. Add the cropped circle image to the first section, and stretch it so it fits perfectly over the original background circle. Set its position type to Sticky. 

Tip: You can set the full image to Don’t Display to check that the cropped one is positioned correctly.

11. From the Layers panel, make sure the full image is arranged behind all of the other content in the section by dragging it to the bottom of the list. Make sure the cropped image is in front of all of the other content by dragging it to the top. 

12. Preview the site. As you scroll, the gradient inside the circle changes and the content moves into the circle, then scrolls up behind the top of the circle.