Fixed background in combination with scroll effect

[cvdw]

Hi!

In this page I have added some animation scroll effect Fade in up to the columns. This is working fine.
https://cresult.nl/royallightfestival/

In copy of this page with a fixed background added, the content with the scroll effect wound show up under the first loading.
https://cresult.nl/royallightfestival/home-4/
I have added the fixed background with this css:

body {
background-image: url(‘https://cresult.nl/royallightfestival/wp-content/uploads/2023/02/royallightgradient-landscape.jpg’);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
height: 100vh;
}

@media screen and (orientation: portrait) {
body {
background-image: url(‘https://cresult.nl/royallightfestival/wp-content/uploads/2023/02/royallightgradient-portrait.jpg’);
}
}

When I remove all the effects, like I did here:
https://cresult.nl/royallightfestival/home-3/

All content show up and the fixed backgrounds are fine.

So there is some problem with the animation scroll effect in combination with the fixed background.

I can’t find the problem, can you help me…?

Regards, Carel

[ruenel]

Hello Carel,

Thanks for writing in!

Please be advised that the Scroll Effect gets triggered when the Section or element is visible in the browser window. As soon as your scroll the page, the Section or element checks itself if it is already visible in the browser window and when it is, the Effect animation gets triggered. Kindly check out my demo here:

• https://cresult.nl/royallightfestival/test/

Scroll the page up to the last section so you can see the effect. It fades IN from the right and as soon as you scroll up, the element fades out to the left.

Best Regards.

[cvdw]

Hi,

I see but now I copied your demo and only added the fixed background with this page css and the content in the last section isn’t loading anymore.

https://cresult.nl/royallightfestival/test-2/

[tristup]

Hi Carel,

If you custom CSS code you have fixed the height of the body to 100vh which is the reason behind the second scrollbar and your issue. I would suggest you remove that to get rid of the issue.

Thanks

[cvdw]

Yes!, that height was the issue I see now!

Thank you for support!

Carel

[tristup]

Hi Carel,

You are most welcome.