How can I achieve this scrolling effect? Z-Index

[WillWashington]

So I’m trying to replicate this effect seen here:

https://redq.io/react-next-landing

I know it is involving the Z index to get the page to scroll OVER TOP of the header, how can I achieve this effect in Pro? thank you.

[nabeel]

Hi William,

Thank you for reaching out to us. You can achieve the similar effect with parallax. To enable the parallax effect, inspect your section in Cornerstone and turn on the Advanced settings for background:

You’ll see some advanced background options, scroll down to find Background Parallax to enable the effect.

If you’re using Pro then you can also hide your navigation bar until scroll to have similar kind of a effect, please see https://theme.co/apex/forum/t/nav-bar-pushes-down-bottom-bar-items-in-header-set-to-cover-screen/62590

Hope this helps!

[WillWashington]

In which section do I add the Parallax? to the header? or to the section on the content area directly below the header? How do I set it up? Header Z-Index = ? Content Section Z-index = ? Please help me out a bit more as you just reiterated what I already said and posted screen shots of it.

[christopher]

Hi William,

First of all, please kindly consider that this is a feature that is not available in our theme out of the box and needs customization to be able to create such a function and that is outside of our support scope.

We will be able to give you some hints on how to get started but we will not be able to give you the details of the whole implementation.

You need to add the big top background on the Header. Go to the Header Builder and add a Bar. Set a background image to that bar and under the dimensions control group set the height of the section to 100vh. 100vh will ensure that the bar will take up the whole screen at the beginning:

Also, you need to set the z-index option of the Bar inside the Setup control group to 0:

To force the background to stand fixed, you need to click the Customize tab of the Bar element and click the Element CSS option and add the code below:

$el .x-bg-layer-lower-image {
  background-attachment: fixed;
}

Click here to know more about the Element CSS feature.

Thank you.