Layered scrolling

Hello! I was wondering how this effect https://www.madetogether.com.au/ on the bottom (last section) was created? It somehow stays in place, and the section goes over it.

Thank you!

Bump! Sorry still stuck on this one, could someone help me out? It’s the footer that reveals behind the second last section.
Thank you!

Say your footer is 500px height, or 50VH height.

  1. Give your footer a z-index of, say, 10, and give a higher z-index value to the other sections of the page
  2. make your footer position fixed to the bottom
  3. give your Body element a padding bottom with a value equal to the height of the footer.

Now you should have almost the effect you need, you just now have to add an interaction that will make the footer go a bit down by default and will push it up while the last section is scrolling into/out of view.

Worked perfectly, thank you Vincent!

1 Like