lukehaas / Scrollify

A jQuery plugin that assists scrolling and snaps to sections.
MIT License
1.8k stars 578 forks source link

Is Layered scrollify sections with same background image possible? #416

Open cordial opened 1 year ago

cordial commented 1 year ago

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 commented 1 year ago

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

Screenshot 2023-02-20 at 14 41 03

cordial commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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.