soy Kseso y esto EsCSS

Sticky header-shadow y parallax scroll al pie de página

O cómo conseguir que la sombra del header se mantenga fija en la parte superior de la ventana al alcanzarlo y revelar el footer de abajo arriba al llegar a él. También se podría decir que los efectos son el nuevo valor position: sticky para la sombra del encabezado y un parallax scroll en el pie de página.

Sticky header-shadow y parallax scroll al pie de página

·Por Kseso ✎ 1
Sticky header-shadow y parallax scroll al pie de página

O cómo conseguir que la sombra del header se mantenga fija en la parte superior de la ventana al alcanzarlo y revelar el footer de abajo arriba al llegar a él. También se podría decir que los efectos son simular el nuevo valor position: sticky o el background-attachment: local para la sombra del encabezado y un parallax scroll en el pie de página.

La demo, ya que no es ese su objetivo, no incluye el uso de @medias queries para adaptarla a distintos tamaños de pantaña.

Sticky header shadow

sticky header shadow con Css21El efecto logrado es el del gif de la derecha. Por si no supe explicarme. Fíjate qué hace la sombra del header al desplazar la página. Se desplaza con el encabezado y al llegar al top de la ventana permanece fija en él, a la vez que la sombra se recorta por los laterales.

Y el efecto en sí, no la sombra, es en base a Css2.1 por lo que el efecto será operativo en aquellos navegadores que soportan box-shadow. En el resto, degrada y no interfiere.

See the Pen Sticky header-shadow & parallax footer Css2.1 by Kseso (@Kseso) on CodePen.

Ver Demo a Full

Lo primero es el marcado html, que en este caso es tan sencillo como dos elementos, el header y article. Nada más:

<header> <!-- su contenido --> </header> <article> <!-- su contenido --> <article>

El Css del sticky shadow

La idea es la siguiente.
Primero: declarar una sombra al header que desaparecerá al hacer scroll.
Segundo: Utilizar el pseudoelemento body:before para mostrar su sombra cuando el header y la suya desaparezcan. Eso es todo. Una ilusión.

header { position: relative; box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); background: #472F53; z-index:4; }

Todas las declaraciones son de lo más sencillas y creo que no necesitan explicación. La razón del z-index te la cuento más abajo.

Vamos con el body:before que es el encargado de hacer la "magia css". Esta es su regla:

body:before { content: ""; height: 10px; width: 90% position: fixed;; left: 5%; top: -10px; border-radius: 60%/7px; box-shadow: 0 0 20px 4px rgba(0, 0, 0, 0.9); z-index: 3; }

Está posicionado como fixed y colocado fuera de la la ventana height:10px; top:-10px para que sólo se vea su sombra.
Acortamos su tamaño width: 90% para que deje sin sombra sus laterales
Se centra al posicionarlo como left: 5%. La mitad del espacio del body que no cubre. Más info sobre centrados
Y por último acentuamos un poco más el efecto de la sombra afilándola en sus extremos con border-radius: 60%/7px;.

Y por último los z-index. El header tiene un valor más alto que el pseudoelemento, así, sea cual sea el fondo del encabezado, no se manchará con la sombra del body:before
Y a su vez el z-index este último debe ser mayor que el del resto de todos los elementos para mantenerse encima (eje-z) de ellos

Y eso es todo lo que se necesita. Ya tenemos nuestro efecto de sticky shadow. Efecto que habrás visto en multitud de página, pero a base de otros lenguajes.

Footer con efecto parallax scroll

O de cómo destapar el footer mostrándolo de abajo hacia arriba al llegar a él. También es un efecto lo suficeintemente conocido como para no necesitar explicación. De nuevo la demo por si antes no te fijaste en él.

sticky header shadow con Css21
Footer con efecto parallax scroll

La idea es igual de sencilla que antes. Sabiendo la altura del footer, sólo tenemos que posicionarlo en el bottom de la página.

footer { background: url(ruta) no-repeat center bottom; position: fixed; left: 0; bottom: 0; height: 350px; width: 100%; text-align: center; padding: 70px 5% 0; }

En la demo, la altura la marca la imagen del fondo del footer. En otros casos será otro factor, como los contenidos.

Al estar como fixed no haría crecer al body y taparía al contenido de su hermano anterior en el html, el article, por su lugar en el flujo del documento.
Así que toca hacerle sitio. Y para ello recurrimos al margen inferior del article:

article { background: #f9f9f9; margin-bottom: 350px; z-index:1; box-shadow: -5px 0 10px 8px rgba(0, 0, 0, 0.7); padding: 2rem 5%; }

Y no se necesita más. El fondo es para que no se vea lo que hay debajo (eje-z) al alcanzar al footer y la sombra para dar la sensación de profundidad al footer.

Como curiosidad y por si acaso, me ocurrió un caso curioso sólo en Chrome que no miré a ver el porqué. Te cuento por si te lo encuentras:
Como ves en el ejemplo uso la variante del modelo de caja box-sizing: border-box. A la vez tenía declarado una altura en el body y el html del 100%
Pues al ver la demo con Chrome me encontré con el margen del article desaparecido y por lo tanto el footer no aparecía.
Fue retirar la altura y volver todo a la normalidad.

Aquí tienes el pen con todos los estilos y marcado html utilizados en la demo.

Este artículo fue escrito y publicado originalmente en Enero de 2013.

Adenda: background-attachment: local

El efecto de la sombra es posible lograrlo con el nuevo background-attachment: local;

Sólo a efectos de ilustrar dicho valor y cómo funciona, mira esta realización, obra de Lea Verou en su blog. Firefox no lo soporta a día de hoy.

Check out this Pen!

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso