Footer Reveal on scroll
I am building a site for a client and he wants this footer reveal on scroll . I have tried following few blogs, videos and some templates but I am still unable to achieve this. Anyone who has done similar thing can you please guide me and give me tips on how to achieve this particular effect.
Can anyone help me?
Thank you in advance 🙏
videos and templates I tried to follow : https://www.youtube.com/watch?v=gi_M1xWmeKc,
https://webflow.com/made-in-webflow/website/Trendy-Footer-Reveal
preview link: https://preview.webflow.com/preview/thinkmind-dev?utm_medium=preview_link&utm_source=designer&utm_content=thinkmind-dev&preview=824bcbc8230683ba80dc7d0d3e100afd&workflow=preview
Robin G.
YouTube
fixed footer scroll reveal (in Webflow)
🖐 Check out my Webflow templates: https://robn.link/templates
🤙 This example is based on my portfolio template "Wind" - https://webflow.com/templates/html/wind-portfolio-website-template
🤙 Try out Webflow: https://webflow.grsm.io/robin
🤙 Lenis smooth scroll: https://github.com/studio-freight/lenis
This example is very similar to my previous ...
Trendy Footer Reveal!
Trendy Footer Reveal! - Webflow
One of my favorite, trendy interactions is a footer that reveals itself once the user gets to the bottom of the page. I've used this effect a number of times, and thought I'd share it with you (trendy vertical nav included)! Enjoy, and clone away!
For Cloners: Be sure to make the height of the section-footer-spacer to be the same as your footer...
4 Replies
Hey @Purv You could do this in a couple of ways, but I'll use some of the rsources you sent as an example!
Your basic setup will be similar to normal, your footer still at the bottom of your element list, but instead of leaving it relative or static you'll need it to be fixed, and to the bottom of the page.
This will work best if you give it an explicit height, so something like 60vh or 60svh
Because it's fixed you may notice that it's on top of other elements, but you want it to reveal, so set your other sections to relative, and give them a higher z-index like 10, while giving your footer a lower z-index, like 1
at this point your almost there, you just need to add an empty div block that's not fixed, right before your footer section, that has the same height as the footer (60vh), this will let your page keep scrolling even after you've hit the end of your page content, you need this because remember your footer is now fixed. You can set it's pointer events to none, or set it to have a lower z-index than the footer (so like 0)
So in your project that you sent over, some things you'll have to consider:
1. Your sections will need background colours, if they're transparent you'll see what's behind them, which in this case is the footer
2. the empty div block I mentioned should stay within the footer, so wrap your footer section in another div called footer-wrapper or something like that, and then in there have your section-footer and then the footer-reveal div as a sibling
3. You only need to make the main-wrapper relative with a higher z-index than the footer—all of it's children will inherit that higher 'layer', as long as all of your sections have background-colors
Here's a quick loom i did on your read-only, I didn't do all of the combo classes, correctly I just put the section colours wherever to be quick but you get the idea:
https://www.loom.com/share/f124ab1d29b14351a1b995b5c600d4b1?sid=b00a84ea-ec24-48bb-b186-a7e778233f73
Thanks a lot @AtomicZBRA for such a detailed explanation and also for the loom video as well it made my work so easy. Really appreciated for the help 🫡
Awesome glad I could help! 🥳