Pasar de texto sólido a texto knockout en desplazamiento

Aquí tienes un divertido truco de CSS para mostrárselo a tus amigos: un título grande que cambia de un color sólido a un texto resaltado a medida que la imagen de fondo detrás de él se desplaza hasta su lugar. ¡Y podemos hacerlo usando HTML y CSS simples!

Este efecto se crea renderizando dos contenedores con h1elementos fijos. El primer contenedor tiene un fondo blanco con texto resaltado. El segundo contenedor tiene una imagen de fondo con texto blanco. Luego, usando algunos trucos de recorte preferidos, ocultamos el texto del primer contenedor cuando el usuario se desplaza más allá de sus límites y viceversa. Esto crea la ilusión de que el fondo del texto está cambiando.

Antes de comenzar, tenga en cuenta que esto no funcionará en versiones anteriores de Internet Explorer. Además, las imágenes de fondo fijas pueden resultar engorrosas en los navegadores WebKit móviles. Asegúrese de pensar en un comportamiento alternativo para estas circunstancias.

Configurando el HTML

Comenzamos a crear nuestra estructura HTML general. Dentro de un envoltorio exterior, creamos dos contenedores idénticos, cada uno con un h1elemento envuelto en un archivo .title_wrapper.

header  !-- First container --  div    div      h1The Great Outdoors/h1    /div  /div  !-- Second container --  div    div      h1The Great Outdoors/h1    /div  /div/header

Observe que cada contenedor tiene una .containerclase global y su propia clase de identificador ( .container_solidy .container_image, respectivamente). De esa manera, podemos crear estilos base comunes y también apuntar a cada contenedor por separado con CSS.

Estilos iniciales

Ahora, agregamos algo de CSS a nuestros contenedores. Queremos que cada contenedor tenga la altura completa de la pantalla. El primer contenedor necesita un fondo blanco sólido, lo cual podemos hacer en su .container_solidclase. También queremos agregar una imagen de fondo fija al segundo contenedor, lo cual podemos hacer en su .container_imageclase.

.container {  height: 100vh;}/* First container */.container_solid {  background: white;}/* Second container */.container_image {  /* Grab a free image from unsplash */  background-image: url(/path/to/img.jpg);  background-size: 100vw auto;  background-position: center;  background-attachment: fixed;}

A continuación, podemos diseñar h1un poco los elementos. El texto interior .container_imagepuede ser simplemente blanco. Sin embargo, para obtener texto eliminado para el h1elemento interno container_image, debemos aplicar una imagen de fondo, luego buscar las propiedades CSS text-fill-colory background-clippara aplicar el fondo al texto mismo en lugar de los límites del h1elemento. Observe que el h1fondo tiene el mismo tamaño que el de nuestro .container_imageelemento. Eso es importante para asegurarse de que todo esté alineado.

.container_solid .title_wrapper h1 {  /* The text background */  background: url(https://images.unsplash.com/photo-1575058752200-a9d6c0f41945?ixlib=rb-1.2.1q=85fm=jpgcrop=entropycs=srgbixid=eyJhcHBfaWQiOjE0NTg5fQ);  background-size: 100vw auto;  background-position: center;    /* Clip the text, if possible */  /* Including -webkit` prefix for bester browser support */  /* https://caniuse.com/text-stroke */  -webkit-text-fill-color: transparent;  text-fill-color: transparent;  -webkit-background-clip: text;  background-clip: text;    /* Fallback text color */  color: black;}.container_image .title_wrapper h1 {  color: white;}

Ahora queremos que el texto se fije en el centro del diseño. Agregaremos un posicionamiento fijo a nuestra .title_wrapperclase global y lo fijaremos en el centro vertical de la ventana. Luego usamos text-alignpara centrar horizontalmente nuestros h1elementos.

.header-text {  display: block;  position: fixed;   margin: auto;  width: 100%;  /* Center the text wrapper vertically */  top: 50%;  -webkit-transform: translateY(-50%);      -ms-transform: translateY(-50%);          transform: translateY(-50%);}.header-text h1 {  text-align: center;}

En este punto, los elementos h1de cada contenedor deben colocarse directamente uno encima del otro y permanecer fijos en el centro de la ventana a medida que el usuario se desplaza. Aquí está el código completo y organizado con algo de sombra agregada para ver mejor la posición del texto.

Recortar el texto y los contenedores.

Aquí es donde las cosas empiezan a ponerse realmente interesantes. Solo queremos que un contenedor h1sea visible cuando su posición de desplazamiento actual esté dentro de los límites de su contenedor principal. Normalmente, esto se puede resolver usando overflow: hidden;el contenedor principal. Sin embargo, como nuestros dos h1elementos utilizan un posicionamiento fijo, ahora están ubicados en relación con la ventana del navegador, en lugar del elemento principal. En este caso el uso overflow: hidden;no tendrá ningún efecto.

Para que los contenedores principales oculten el contenido de desbordamiento fijo, podemos usar la clippropiedad CSS con posicionamiento absoluto. Esto le dice a nuestro navegador que oculte cualquier contenido fuera de los límites de un elemento. Reemplacemos los estilos de nuestra .containerclase para asegurarnos de que no muestren ningún elemento desbordado, incluso si esos elementos usan una posición fija.

.container {  /* Hide fixed overflow contents */  clip: rect(0, auto, auto, 0);  /* Does not work if overflow = visible */  overflow: hidden;  /* Only works with absolute positioning */  position: absolute;  /* Make sure containers are full-width and height */  height: 100vh;  left: 0;  width: 100%;}

Ahora que nuestros contenedores utilizan posicionamiento absoluto, se eliminan del flujo normal de contenido. Y, debido a eso, necesitamos posicionarlos manualmente en relación con su respectivo elemento principal.

.container_solid {  /* ... */  /* Position this container at the top of its parent element */  top: 0;}.container_image {  /* ... *//* Position the second container below the first container */  top: 100vh;}

En este punto, el efecto debería estar tomando forma. Puede ver que el desplazamiento crea una ilusión en la que el texto resaltado parece cambiar de fondo. En realidad, es solo nuestra máscara de recorte que revela un h1elemento diferente dependiendo de qué contenedor principal se superpone al centro de la pantalla.

Hagamos feliz a Safari

Si está utilizando Safari, es posible que haya notado que su motor de renderizado no actualiza la vista correctamente al desplazarse. Agregue el siguiente código a la .containerclase para forzar que se actualice correctamente.

.container {  /* ... */  /* Safari hack */  -webkit-mask-image: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 100%);}

Aquí está el código completo hasta este punto.

Hora de limpiar la casa

Asegurémonos de que nuestro HTML siga las mejores prácticas de accesibilidad. Los usuarios que no utilizan tecnología de asistencia no pueden darse cuenta de que hay dos h1elementos idénticos en nuestro documento, pero aquellos que utilizan un lector de pantalla seguramente lo notarán porque se anuncian ambos títulos. Agreguemos aria-hiddena nuestro segundo contenedor para que los lectores de pantalla sepan que es puramente decorativo.

!-- Second container --div aria-hidden="true"  div    h1The Great Outdoors/h1  /div/div 

Ahora, el mundo está en nuestras ostras cuando se trata de estilo. Somos libres de modificar las fuentes y los tamaños de fuente para que el texto quede exactamente como queremos. Incluso podríamos llevar esto más allá agregando un efecto de paralaje o reemplazando la imagen de fondo con un video. Pero bueno, en ese punto, asegúrese de trabajar un poco más en la accesibilidad para que aquellos que prefieren menos movimiento obtengan la experiencia adecuada.

Eso no fue tan difícil, ¿verdad?