Estaba navegando por el sitio web de KPR-verse cuando noté este efecto genial en la parte inferior. Siempre que veo algo como esto, siempre quiero recrearlo. Mi proceso es simple: comienzo intentando replicar el efecto, luego hago un blog para explicar cómo se hace, con el objetivo de dividir diseños complejos en pasos fáciles de entender.

Al principio, a menudo dudo si puedo lograrlo, pero después de pensarlo un poco, generalmente encuentro una manera de dividir el diseño en pedazos. Al conectar esas piezas, logro lograr el efecto. ¡Ya basta de hablar! ¡Vamos a profundizar en cómo puedes hacerlo tú mismo!

Desglosando el efecto de pie de página de KPR Verse

Al final del sitio, encontrará el banner de KPR al fondo. A primera vista puede parecer un poco complejo, pero no lo es tanto.

Primero, crea un div con la clase .container. Este será el elemento raíz de nuestro tutorial.

A continuación, divida el .container en dos partes: .subcontainer-wrapper y pie de página. El elemento de pie de página contendrá el banner de KPR.

Ahora, divida aún más el .subcontainer-wrapper en dos partes. La parte superior contiene todo el contenido de nuestro sitio web, mientras que la parte inferior se deja en blanco sin fondo, esencialmente invisible, pero aún tiene el ancho y alto de la ventana gráfica. La mitad inferior es crucial porque nos permite ver el pie de página.

Hasta este punto, todos los elementos están en el flujo HTML normal, es decir, de arriba a abajo. Ahora, necesitamos romper este orden colocando el pie de página detrás y colocando el .subcontainer-wrapper al frente. Para hacer esto, configuraremos el .subcontainer-wrapper en la posición: absoluta en relación con su .container principal. Esto eliminará el .subcontainer-wrapper del flujo DOM normal.

Eso es todo lo que necesitamos para configurar el efecto. Ahora, llene la parte superior del .subcontainer-wrapper con contenido, pero deje la parte inferior (el div invisible) vacía. Además, agregue contenido al pie de página.

Una vez que hayas agregado el contenido, debería verse así.

La parte superior oculta el fondo y, a medida que te desplazas hacia abajo, cuando finaliza el contenido visible, la sección invisible revela el pie de página. ¡Voilá! Ahí lo tienes: simple y fácil.

_¡Gracias por seguirnos! Espero que esta guía te haya resultado útil y fácil de entender. ¡Mantén la curiosidad y sigue explorando!

original: KPR-verso

Sitio de demostración: enlace de demostración. Para esta demostración, utilicé el sitio de Google I/O (https://io.google/2024/) y lo adapté para mostrar un concepto similar.

Código fuente: Enlace Github_