What do you think about the course so far?
Thank you for your feedback!
Explore more topics
Product & Design Advisor
I’m a Product and Design Advisor at Editor X. I have a Bachelor’s Degree in Graphic Design from PUC-RIO and I’m passionate about conceptual design, arts and photography. During my free time I enjoy surfing at Prainha and cooking up an authentic Brazilian barbecue for friends and family.
How to create a video background with sticky elements
Before you get started
In this example, we’ll create a crypto wallet site with a video and several sticky elements to create an interactive scroll effect. To follow along, open up the template in the editor and save each component to your site assets. These include the background video, the headline text, the phone background container, the wallet and total balance container, the three cards with different currencies, the green button and the services stack.
Then add a new page to re-create this design as you follow along.
Part 1: Set up your site
Make sure the page header is set to Pinned and Overlap next section is selected
In the next section, add a 1X8 grid
Set the grid’s column width to 1fr
Adjust all 8 rows of the grid to 100vh
Part 2: Add the video and headline
Add the video to the first row of the grid
Stretch it to fill the cell
Change the video’s position type in the Inspector panel to Sticky
Keep the top offset at zero
Add the headline text over the video in the first row of the grid
Use the alignment tab in the Inspector to center the headline in the section
Part 3: Add and align the sticky elements
To add our sticky elements precisely, we’ll add them all together in the second grid row first. Once we have the position settings right, we’ll move each one into its own grid row.
Start by adding the components we need: the phone background, the wallet and total balance, 3 cards and the green button in grid row 2
Center align the phone background element in the grid cell
Dock it to the top
Make sure the top margin units are in viewport height
Set the element to sticky position
Copy the value of the top margin, 12.5vh, and set that as the Top offset
Now we’ll repeat these steps with the rest of the elements. Make sure they’re all centered horizontally and docked to the top with the top margin in vh. Set each one to sticky position, and use the top margin value as each element’s top offset. The top margin/top offset values for the remaining elements are:
Wallet and total balance stack: 21vh
First currency card element: 45vh
Second currency card element: 55vh
Third currency card element: 65vh
Green button: 75vh
Note: Best practice here is to position elements by selecting them and using the Inspector panel. If you drag and drop you might unintentionally re-parent an element.
Part 4: Reposition elements in separate grid rows
When all the elements are positioned and have the correct settings in the second grid row, we’ll move each one to separate grid rows, but with the same position.
The phone background stays in grid row 2
From the Inspector panel, move the wallet and total balance container into row 3
The first currency container moves to row 4
The second one to row 5
The third one to row 6
Add the green button to grid row 7
Drag in the services stack and place it into grid row 8
Center align it in the cell
Part 5: Adjust the services container
When we preview the site, the services container scrolls up to cover the sticky elements. We don’t want this behavior, so we’ll go in and add bottom margins on each sticky element to prevent it. Start by using the Inspector panel to help calculate the distance we need for the bottom margin.
Select the phone background container
We already know the top margin is 12.5vh. Because this element is aligned to the center, we know the bottom margin will be the same on top and bottom
Add a bottom margin of 12.5vh plus 100vh (the size of the last grid row), so 112.5vh
Select the wallet and total balance container
In the Inspector, dock it to the bottom of the grid cell
Change the bottom margin units to vh
Make a note of the value—in this case 58vh
Click undo twice to undo those last two changes
Add a bottom margin with that value plus 100vh, so 158vh
Repeat steps 4 to 9 for the remaining containers and button
Preview one more time
Result: The video remains in place as a background and when you scroll the different elements move up into view and then stick in place.