[Support request] Page with sliding/ sticky scrolling sections

[Dorin]

Hi. I’m trying to create a page much like this one. So overlapping sections that probably stick to the top and then hidden using z-index. Don’t know how to exactly start this whole thing. Any ideas are much appreciated. Thank you.

[David]

Hi there,

that particular site is using a very specific layout and javascript to create that effect.
Are you wanting something identical to that or just some content with static background images that overlay each other ons scroll ?

[Dorin]

Hi David. Overlaying background images on scroll would work fine too if that can be achieved using css. Thank you.

[David]

Simple method:

1. new page set to Full Width content – no sidebars.
2. Using the GenerateBlocks plugin add a Container Block
Set the Spacing > Min Height: 100vh.
Set the Vertical Alignment to center.
Add a background image and set the attachment to fxed.
3. Add whatever content inside the Container.

Now just duplicate that container as many times as you require, updating each background image and content.

[Dorin]

Sorry for the late reply, David. I started working on the page using your instructions. It mostly works, thank you. However, I can’t get the overlay to work on mobile.

Two more things:
1. Is there a way that I can make the text inside the containers below having the same parallax effect as the text in the hero header that I created using Elements?
2. I added text (title and a tagline) on the hero header by creating the respective classes in Elements, but I don’t know how to make these responsive. Or maybe there’s a better practice instead, like creating a container that acts like a hero header? The content inside would be easier to add and customize in GenerateBlocks.

[Elvin]

Hi there,

1.) Are you pertaining to the texts added on the GenerateBlocks contents? There’s no parallax effect for these as of the moment. You may have to write your own parallax script for these.

2.) You can manage its responsiveness by writing custom CSS with @media rules.

Example: Different font sizes for mobile and desktop.

/* for mobile */
@media(max-width:768px){
.hero-title-stories {
font-size: 30px;
}

.hero-subtitle-stories {
font-size: 24px;
}
}
/* for tablets and desktops */
@media(min-width:769px){
.hero-title-stories {
font-size: 40px;
}

.hero-subtitle-stories {
font-size: 30px;
}
}

[Dorin]

Thank you, Elvin. It works.
Yes, I was reffering to the Generate Blocks contents. I’ll look into it.

How about the overlaying images for mobile as you scroll down the page? Instead of overlaying, they just sit one after the other. I can’t get it to work.

[Ying]

Hi Dorin,

Fixed background image doesn’t work on mobile, and iOS will cause the image to blow up is scale.
So it will be changed back to initial by default when screen shrinks to mobile.

It might work by using pseudo element for the entire background image, but won’t work in your case.

[Author]

Posts