Crear efectos deslizantes usando posicionamiento adhesivo

Los elementos adhesivos se utilizan predominantemente para mantener algo que se muestra en la pantalla durante el desplazamiento. ¡Por muy genial que sea, también podemos ocultar elementos de la misma manera!

Aquí hay una situación típica (um) complicada:

Los elementos fijos ( position: sticky;) son muy similares a los elementos fijos ( position: fixed;) en que ambos mantienen su posición en la pantalla, incluso cuando el usuario se desplaza hacia arriba o hacia abajo en la página. ¿La diferencia? Un elemento adhesivo permanece confinado al contenedor principal en el que se encuentra. Compare el ejemplo adhesivo anterior con este que usa el mismo concepto usando un elemento fijo en su lugar:

Digamos que queremos crear un efecto en el que los elementos se deslizan hacia adentro o hacia afuera al desplazarse, algo así como paralaje. Por ejemplo, un encabezado que se desliza hacia afuera y un pie de página que se desliza hacia adentro:

¿Bien adivinado qué? ¡Podemos hacerlo con elementos adhesivos!

¿Como hacemos eso? Me alegra que hayas preguntado. Analicémoslo.

configuración HTML

Hay tres elementos adhesivos en nuestro ejemplo:

• El primero es el encabezado de categoría que se desliza debajo del cuerpo del artículo una vez que llega a la parte superior de la pantalla.
• El segundo es el título del artículo y permanece visible en la parte superior de la pantalla, mientras el cuerpo del contenido desaparece detrás de él al desplazarse (que es el comportamiento típico de un elemento adhesivo).
• El tercer elemento es un pie de página que se desliza fuera del artículo y se revela cuando el artículo se desplaza por encima de un cierto umbral.

Veamos cómo se hace. Este es el código HTML con el que estamos trabajando… básicamente dos artículos:

article  divCategory Header/div  h1Article 1 Title/h1  pBody content would go here./p  !-- More content --  div    pArticle 1 Footer/p  /div/articlearticle  divCategory Header/div  h1Article 2 Title/h1  pBody content would go here./p  !-- More content --  div    pArticle 2 Footer/p  /div/article

El CSS pegajoso

Los elementos .category, .titley .footerse llevarán position:sticky;bien con una propiedad de ubicación que indica en qué parte de la pantalla comenzarán a “pegarse” cuando se desplacen.

.category,.title,.footer {  position: -webkit-sticky; /* Required for Safari */  position: sticky;  height: 50px;}.category {  top: 0;}.title {  top: 0;}.footer {  bottom: 100px;  z-index: -1;}

No le estoy haciendo mucho a los elementos adhesivos, excepto darles estilo. Ya están haciendo lo que tienen que hacer: pegarse a la pantalla. Todo lo que queda es crear una portada y algo de espacio para que los elementos entren y salgan a medida que se desplaza la página.

probablemente hay muchas maneras en las que podemos crear una portada en el artículo en la que los elementos adhesivos puedan pasar y ocultarse en una página; Yo elegí un archivo background-image.

article {  background-image: linear-gradient(    to bottom,    transparent 50px,    #F5A623 50px,    #F5A623 calc(100% - 50px),    transparent 0  );  margin: auto auto 50px auto;}

El degradado lineal de fondo se aplica al artículo y se extiende de arriba hacia abajo, comenzando con 50pxtransparencia y un cambio de color con un final abrupto en 50px. ¿ calc Qué pasa? Así es como le digo al color que continúa pero que se queda 50pxen la parte inferior. Luego volvemos a ser transparentes. Eso significa que tenemos dos 50pxfranjas transparentes, una en la parte superior y otra en la parte inferior con alturas iguales que coinciden con las alturas del encabezado de la categoría y el pie de página.

El encabezado de categoría y el pie de página del artículo son los elementos que se deslizan dentro y fuera del texto, por lo que sus alturas son las que determinan qué tan largas serán las franjas transparentes en la parte superior e inferior del degradado.

La manera en que todo esto funciona es que tanto el encabezado de la categoría como el título del artículo se adhieren a la pantalla cuando sus partes superiores se alinean con la parte superior de la ventana gráfica. El título se apila sobre el encabezado de la categoría y, cuando comienza a adherirse a la parte superior de la ventana gráfica, oculta el encabezado de la categoría por completo.

En cuanto al pie de página, ya estás pegado 100pxsobre la parte inferior de la pantalla (dentro del límite del artículo), pero no lo verás porque está detrás del contenido mediante z-index:-1. Será visible una vez que nos desplacemos más allá del comienzo de la última franja transparente del fondo del artículo.

.footer {  bottom: 100px;  margin: 50px auto auto auto;  z-index: -1;}

Debido a que el encabezado de la categoría simplemente se contenta con nada que oculte excepto el texto en sí, es una buena idea darle al último elemento fijo (el pie de página) un margen superior de 50px(para mantener las cosas iguales) para que no lo ves detrás. el encabezado de la categoría mientras se desplaza.

¡Eso es todo!

Ahora, por supuesto, querrás personalizarlo y cambiarlo, como las dimensiones, la cantidad de elementos y el tipo de contenido. La clave es crear esas cubiertas que permiten que los elementos adhesivos se oculten detrás y se revelen a medida que pasan a través de ellas; nuevamente, probablemente haya diferentes formas de hacerlo, pero yo opté por rayas transparentes en un degradado.

¿Qué otro ejemplo? ¡Seguro!

A continuación se muestra otro ejemplo con desplazamiento horizontal (y un degradado horizontal), que podría ser ideal para aplicar este concepto a los dispositivos móviles:

¿Ves cómo la comida se revela cuando un artículo sale de la ventana gráfica y luego se oculta cuando el siguiente artículo pasa sobre él?

El mismo tipo de configuración HTML:

article  divArticle 1 Title/div  pArticle content goes here./p  img src="/path/to/revealed/image.png"/articlearticle  divArticle 2 Title/div  pArticle content goes here./p  img src="/path/to/revealed/image.png"/article

Voy a utilizar mi solución de degradado lineal para crear las portadas, esta vez de izquierda a derecha para tener en cuenta un desplazamiento horizontal:

article  {  background-image: linear-gradient(    to right,    transparent 50px,    #F5A623 50px,    #F5A623 calc(100% - 50px),    transparent 0  );}.title,.image  {  position: sticky;  position: -webkit-sticky;  z-index: -1;  width: 50px;}.title  {  left: 20px;  margin-right: 52px;}.image  {  left: 150px;}

Observe nuevamente que usaremos las mismas dos franjas transparentes de 50 píxeles que antes; La única diferencia es que las aplicaremos al ancho en lugar de a la altura.

Ambos elementos adhesivos (el título y la imagen) se deslizarán debajo y a través del artículo. Entonces, para evitar superponerlos durante el desplazamiento, el título tiene un margen derecho igual al ancho de la imagen, que es de 50 píxeles (más 2 píxeles adicionales para una línea más limpia en Chrome).

Esto es lo que sucede: a medida que nos desplazamos horizontalmente, el título se mantiene a 20 píxeles del borde izquierdo de la pantalla y la imagen se mantiene a 150 píxeles del mismo. Como ambos tienen z-index: -1;, desaparecerán debajo del artículo (bueno, del degradado de fondo); se ocultan a medida que pasan por el color sólido del degradado y se revelan mediante las rayas transparentes.

Vale, un ejemplo más

Antes de terminar, déjame mostrarte otro ejemplo que inspiró esta publicación. Se trata de un pie de página de un sitio que se revela al desplazarse por la página. Vi este diseño por primera vez en el sitio web de Ryan Seddon hace mucho tiempo.

Este diseño se suele realizar con un pie de página “fijo” al que se le da un espacio al final de la página para que salga, utilizando el margen. Pensé que si los elementos fijos pueden hacer eso para toda la página, entonces tal vez los elementos fijos puedan hacer algo similar para los elementos individuales, y de ahí lo que se me ocurrió hasta ahora.

En consecuencia, podemos lograr este mismo efecto utilizando las técnicas adhesivas que hemos cubierto hasta ahora.

Primero, nuestro HTML:

main  h1Site Title/h1  pSite content/p/mainfooter  Site Footer/footer

html {  background-color: #fff;}body {  background-image: linear-gradient(    to top,    transparent 60px,     #fff 60px,     #fff 0  );}footer {  position: -webkit-sticky;  position: sticky;  bottom: 0;  height: 50px;  padding: 5px 0;  z-index: -1;}

Un pie de página adhesivo y un degradado de fondo en el cuerpo son suficientes.