Is Layered scrollify sections with same background image possible?

[cordial]

First posted on stack overflow here - sorry to post here, but i didnt have much luck there. https://stackoverflow.com/questions/75504739/layered-scrollify-sections-with-same-background-image

I have the following page structure that I need to have sections scrolled to (using scrollify hopefully)

Hero video with background A (standard section) Section with text A and background B Section with text B and background B Section with text C and background B Section with Image B (standard section) Section with Image C (standard section) Section with Image D (standard section)

I have the sections working using scrollify for the non italic sections above, but is it possible to add the three sections with different text and the same background? In a similar way to the layered example here (which seems to have no example code)?

https://projects.lukehaas.me/scrollify/examples/layered-scrolling/

So on each scroll between italic sections, the text is replaced from A to B to C, but the background stays the same as B each time? And then after that goes back to the standard flow..

Here is my scrollify code -

$.scrollify({ section: ".section_wrap", sectionName: "section-name", interstitialSection: "", easing: "easeOutExpo", scrollSpeed: 600, offset: 0, scrollbars: true, standardScrollElements: ".section-approach .section-projects .section-team", updateHash: false, }); Other info - this is a wordpress site that also has bootstrap 5.

cheers david

[lukehaas]

Yes, that should be possible. If you want to see the code for the layered example, it's viewable from the console:

[cordial]

hey, thanks for the quick reply. i cant see how i would specify that one background would be used three times though with the foreground changing each time?

[lukehaas]

When you said background I presumed you were referring to a background image or background colour etc. Scrollify doesn't have the concept of background/foreground so I'm not really sure what to advise.

[cordial]

Sorry, I wasn't clear. yes, it is one background image for the 3 sections in question. That over the italic sections above remains the same background image, while the text changes on each scroll to show different text. So you don't see the background image change, but it shows a different piece of text each time you action the scroll.

[lukehaas]

I see. This is really more of a CSS challenge than a Scrollify one. Scrollify is always going to scroll the page so the trick will be to create the effect of a fixed background via CSS.