How to create a parallax scrolling effect

Visual Editor Help
1

In this example, we will create a parallax scrolling effect on a background image. To do so:

  1. Add a background image to your box or section in the background section in the styles tab
  2. While in the styles tab, scroll down to the custom CSS properties section and add:

background-attachment: fixed

  1. Scroll back up to the background section and make sure the image has these styles applied:

  • Image position: center

  • Background repeat: no repeat

  • Background size: cover

These styles will ensure that the image is centered and scaled properly. Now, scroll down your page to see the parallax effect in action!
Dec-11-2020 16-37-28

View an example of a parallax effect here.

2 Likes
2

@maddy Hi Maddy, do you know if there is a way to get this working on mobile? Thanks!

3

Hi @brfisher,

Fixed backgrounds are disabled for mobile devices (they decimate scrolling performance), which is why this isn’t working on mobile. We recommend that you don’t use parallax on mobile for this reason, but if you want to you can use this workaround:

  1. Create a new section for mobile where the box with the background image is wrapped in a section block.
  2. Give the box with the background image these styles in the styles tab:
  • position: fixed;
  • z-index: -1;
  • top: 0;
  • width: 100%;
  • height: 100%;

Giving the box with the background image position fixed will make it always stay in the same place, even if the page is scrolled. The negative z-index value will make the image sit behind the rest of your page content, so it appears to only scroll in its parent container. Here is a fiddle example.

4

Hello @maddy,

How would I create a section that has nested scrolling within that section. Similar to Our Company - Rivian

5

Hi @Harrison!

The example you shared has a div with height: 100vh and position: sticky that wraps the video, which is wrapped in a section that has position: absolute. I created an example of this in Builder here. Let me know if you have any additional questions!

1 Like
6

Hello! I had the same question as the poster about creating a parallax section.

When I tried your steps, I noticed I can’t seem to find the “z-index” option in my styles tab.

This is my builder link: Builder.io: Drag and drop page builder and CMS

1 Like
7

hey @racheldbailey

z-index needs to be manually created in the Style - CSS properties tab

image