El pie de página deslizable

Se acaba de lanzar un sitio nuevo y fascinante llamado The Markup . Lema: Las grandes tecnologías te están mirando. Estamos observando las grandes tecnologías. Gran trabajo de Upstatement . El contenido se ve increíble, pero por supuesto, por aquí siempre estamos interesados ​​en el diseño y la tecnología también. Hay mucho que adorar, desde la tipografía limpia, el diseño interesante y los estados de desplazamiento en ángulo en negrita sobre los bloques, hasta el elegante motivo de puntos.

El pie de página también es inteligente, ya que parece deslizarse desde debajo del contenido a medida que se desplaza hasta el final de la página. ¡Hagámoslo!

Aquí está el truco:

1. El área de contenido principal es al menos 100vhalta . La mayoría de los sitios lo son de todos modos, pero sólo para estar seguros.
2. El área de contenido principal también tiene un fondo sólido , que cubre el pie de página que vamos a ocultar detrás.
3. El pie de página viene después del área de contenido principal en el HTML, por lo que para asegurarse de que el área de contenido principal se encuentre en la parte superior , necesitará un poco de posicionamiento relativo y un índice z.
4. El pie de página utiliza una posición adhesiva para colocarse en la parte inferior.

Este último es el truco más sofisticado, y en realidad es más sofisticado que lo que hace The Markup. Usan position: fixed;en el pie de página y un número mágico margin-bottom en el contenido principal para que funcione. No se necesitan números mágicos cuando se vuelve pegajoso.

El hecho de que eso funcione tan fácilmente sin números mágicos es bastante genial. ¡Gracias a Stephen Shaw por el truco pegajoso! Mi primera oportunidad en esto usó posicionamiento fijo y números mágicos, pero es mucho más utilizable sin eso.

Preethi nos mostró una técnica muy similar en 2018. La principal diferencia aquí es el uso de un degradado lineal en el fondo del cuerpo, lo cual es una buena solución si la aplicación de un color sólido limita de alguna manera el diseño general.

Vídeo de fotogramas clave

¡Stephen hizo uno!