Efecto Footer Revelado con CSS (sin JavaScript)

En muchos sitios web vemos footers fijos o footers que aparecen únicamente al final del scroll. En este ejemplo vamos a combinar lo mejor de ambos mundos: un footer que se mantiene abajo todo el tiempo, pero que solo se hace visible cuando el contenido termina, como si estuviera escondido detrás del main.

¿Qué buscamos?

• El objetivo es que:
• El footer siempre esté ubicado visualmente al final del viewport.
• El contenido (main) se desplace por encima del footer.
• Cuando el contenido termine, el footer aparezca naturalmente, sin animaciones ni JavaScript.
• Funcione con poco código y buen rendimiento.
• El resultado es un efecto suave y minimalista que da un remate visual interesante al diseño.

Código

<header>Header</header>
<main>
  <p>Contenido…</p>
  <p>Contenido…</p>
  <p>Contenido…</p>
</main>
<footer>Footer</footer>

header{
  position: sticky;
  top: 0;
  text-align: center;
  z-index: 15;
}

main{
  position: relative;
  min-height: 100vh;
  background: #FFF;
  z-index: 10;
  text-align: center;
}

footer{
  position: sticky;
  bottom: 0;
  color: #FFF;
  background: #000;
  z-index: 1;
  text-align: center;
}