I’ll describe what I’m trying to do and perhaps someone can help, if they have an idea. I have a fixed navbar with a high z-index, so always on top. I have a fixed hero image, low z-index, always on bottom. I have sections with z-index between the two. I wanted to be able to click on the navbar categories and have those sections scroll up to the top of the page using in-page linking (thus covering over that hero image. That seems to work.
But what do settings do I use (and possibly class styles) to be able to click on the Home button, and have all sections scroll back down, thus revealing the hero image, as when the page was first loaded?
Hi @elcalibano, as @sabanna mentioned, you can create a link to your first “Home” section, and in the link settings, choose “Section on this page”.
Make sure your home sections has a unique ID set in the settings panel. Place a link in your menu to point to the Home section, and the page will scroll back down, thus revealing your hero section
I’m sorry but I couldn’t get it to work. Can you please take a look at this link and tell me how to change my settings or styles in order to get it to work?
That totally works! Thank you, Sabanna. I’m pretty happy with the effect. I hadn’t seen anyone do that before, the simulated parallax interactions being accessible with both manual scrolling and via clicking through in-page linking. What do you think?
Thank you. I took your advice and made it 100 px bigger. I’m hoping to add a lot more scroll interactions to the page ultimately. I think there’s a lot of cool potential with this combination of scroll interactions and in-page linking.
Sabanna, I have a new problem for you on this topic that I’m hoping you can solve. Initially, I had the scroll into view and scroll out of view interactions attached to the same trigger, a div in the “design” section (Section2), when coming up with the technique on the fly.
But now that you helped me get it working I’m adding more sections, I realized that the same div trigger in that design section shouldn’t cause the animations to reverse. The animations should only reverse when you click the home button, bringing that transparent section (ReturnHome) into the viewport. So, I removed the Scroll Out of View animations from that first div trigger in Section2.
I then created a new Scroll interaction, attached to a div in the transparent ReturnHome section, to try and reverse the first animations, i.e. to fade out the sky color, and move the foreground and midground images back to their original positions. It’s not working though. The div triggers are meant to be transparent, but I colored one red and one blue in order to see them while troubleshooting.
I’m not totally sure why screenshots are necessary since above I pasted a link to look at my site in read-only view, where you’d be able to see the issue I described in action, but here are some screenshots as requested. The divs that I placed inside sections are colored blue (for Home) and red (for the Design section, with the semi-transparent white container) just for the purposes of this troubleshooting. Later on they’ll be transparent.
When you load the page, you see the page look like the screenshot with the blue div.
When you click on the design button in the navbar, it scrolls up to bring up the Design section, to look like the screenshot with the red div. The red div triggers the scroll interactions, when it scrolls into view, one of them being the sky color tint div fading on.
When you click the home button in the navbar, the Design section scrolls down, so it looks like the screenshot with the blue div. The blue div is supposed to trigger the sky color tint div to fade out, when it scrolls into view. That’s not happening. If you can fix it using my read-only link, and then tell me how you did it, I’d appreciate it.
One little tip: make “Sky color” div’s height on 100 px bigger.
