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. Correo temporal gratis

Vídeo de fotogramas clave

¡Stephen hizo uno!






SUSCRÍBETE A NUESTRO BOLETÍN 

No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.










Al suscribirte, aceptas nuestra política de privacidad y nuestros términos de servicio.






Tal vez te puede interesar:

  1. La innovación no puede mantener la Web rápida
  2. Rendimiento web ultrarrápido
  3. Tabla de contenidos fijos con estados activos de desplazamiento
  4. “cambiar tamaño: ninguno;” en áreas de texto es una mala experiencia de usuario

El pie de página deslizable

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í

programar

es

https://pseint.es/static/images/programar-el-pie-de-pagina-deslizable-1292-0.jpg

2024-06-13

 

El pie de página deslizable
El pie de página deslizable

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences