Cómo crear un efecto de "levantar el telón" en CSS | consejos CSS

"Levantar las cortinas" es lo que llamo un efecto en el que el fondo se desvanece de oscuro a claro cuando se desplaza, y el contenido en la parte superior también se desvanece de claro a oscuro en una posición fija.

Aquí hay un ejemplo donde usé el efecto en un proyecto real:

¿Quieres saber cómo se hace? Lo llevaré detrás de la cortina y le mostraré cómo levantarlo, con nada más que HTML y CSS.

Comencemos con HTML

Lo que estamos haciendo es una especie de efecto simplificado de "levantar el telón" como este:

Mostrando el efecto de levantar las cortinas de azul oscuro a trigo.
El fondo y el texto cambian de color a medida que se desplaza el elemento.

Lo mantengo simple en aras de la claridad, pero podemos resumirlo en tres cosas:

<div class="curtain">
  <div class="invert">
    <h2>Section title</h2>
  </div>
</div>

En primer lugar, necesitamos un contenedor para la cortina, al que le daremos un .curtain clasificar. Entonces, dentro de la .curtaintenemos el uno .invert elemento secundario que servirá como nuestro cuadro "pegajoso". Y, por último, tenemos el contenido dentro de esta caja - a la antigua usanza <h2> artículo para este ejemplo específico.

Configuremos algunas variables CSS

Son tres valores que sabemos que vamos a necesitar desde un principio. Hagámoslos variables CSS para que sea fácil escribirlos en nuestros estilos y cambiarlos fácilmente más adelante si es necesario.

  • --minh – La altura del contenedor.
  • --color1 - Color claro
  • --color2 – El color oscuro
:root {
  --minh: 98vh;
  --color1: wheat;
  --color2: midnightblue;
}

Es hora de correr el telón.

Entonces podemos definir nuestra .curtain elemento usando las siguientes técnicas:

  • A linear-gradient para el fondo "dividido"
  • min-height para espacio adicional en la parte inferior del contenedor

usamos el ::after pseudo-elemento para agregar el espacio extra en la parte inferior. De esta manera, nuestro contenido "pegajoso" se adherirá al contenedor mientras se desplaza más allá del ::after elemento. Es una ilusión.

.curtain {
  /** create the "split" background **/
  background-image: linear-gradient(to bottom, var(--color2) 50%, var(--color1) 50%);
}

/** add extra space to the bottom (need this for the "sticky" effect) **/
.curtain::after {
  content: "";
  display: block;
  min-height: var(--minh);
}

Hacer que el contenido sea fijo

A continuación, debemos hacer que nuestro contenido sea "pegajoso" en el sentido de que se asiente perfectamente dentro del contenedor cuando cambien los valores de color del fondo y del texto. De hecho, ya hemos dado la .curtainel elemento hijo un .invert clase que podemos usar como un contenedor pegajoso.

Quédate conmigo por un momento, así es como se desarrollará:

  • position: sticky y top definir la pegajosidad y dónde se pega.
  • mix-blend-mode: difference combina el color del contenido dentro del <h2> elemento en el .curtaingradiente de fondo
  • display: flex centra el contenido para la presentación.
  • min-height define la altura del contenedor y permite espacio adicional en la parte inferior.
  • color establece el color de la h2 título.

¡Ahora, para poner eso en el código CSS!

.invert {
  /** make the content sticky **/
  position: sticky;
  top: 20px;

  /** blend the content with the contrast effect **/
  mix-blend-mode: difference;

  /** center the content **/
  display: flex;
  align-items: center;
  justify-content: center;
  
  /** set the minimum height of the section **/
  min-height: var(--minh);
}

h2 {
  /** set the color of the text **/
  color: var(--color1);
}

Están sucediendo muchas cosas aquí, así que expliquemos cada una de ellas.

Primero, tenemos una posición adhesiva que se explica por sí misma y un cuadro flexible para ayudar a centrar el contenido. Nada nuevo o particularmente complicado al respecto.

La altura del contenido se establece mediante la variable CSS y el valor es el mismo valor de altura que el .curtain::after pseudo-elemento.

los mix-blend-mode: difference declaración combina nuestro contenido con el fondo. los difference El valor es complicado, pero puedes visualizarlo como un color de texto invertido en el fondo. Aquí hay una buena demostración de CSS-Tricks Almanac que muestra los diferentes mix-blend-mode valores:

Para que la combinación funcione, debemos establecer el color de nuestro encabezado. En este caso, asignamos un valor de color claro (wheat) a la --color1 variable.

Demostración "Levantar el telón"

Trampas

Me encontré con algunos problemas mientras trabajaba en los detalles del efecto "levantar el telón". Si desea agregar imágenes a contenido "pegajoso", por ejemplo, evite usar imágenes que no se ven bien cuando se invierten los colores. Aquí hay una demostración rápida donde creé una imagen SVG y PNG transparente simple, y se ve bien.

Otro escollo: no hay manera de definir mix-blend-mode: difference en elementos secundarios específicos, como títulos, evitando el efecto en las imágenes. Descubrí que hay varias razones por las que no funciona, la primera de las cuales es que position: sticky cancelar la mezcla.

Lo mismo es cierto cuando usas algo como transform: skewY en el contenedor para agregar un poco de "inclinación" a las cosas. Sospecho que otras propiedades no funcionan bien con la mezcla, pero no he ido tan lejos para averiguar cuáles.

Aquí está la demostración sin desplazamiento que elimina las propiedades perturbadoras:

¡Recordatorio!

Me encantó crear este componente, y siempre me encanta cuando puedo lograr algo usando solo HTML y CSS, especialmente cuando funcionan sin problemas en todos los navegadores.

¿Qué hará con él? ¿Hay alguna forma diferente de abordar un efecto de "elevador de cortina" como este? ¡Házmelo saber en los comentarios!

Si quieres conocer otros artículos parecidos a Cómo crear un efecto de "levantar el telón" en CSS | consejos CSS puedes visitar la categoría Estilo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas