Layered scrollify sections with same background image

Question

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

Layered scrollify sections with same background image

0 Answers0