CSS

Cómo crear un efecto de «levantamiento de cortina» en CSS trucos CSS

«Levantar las cortinas» es lo que llamo un efecto en el que el fondo cambia de oscuro a claro al desplazarse, y el contenido de la parte superior también cambia de claro a oscuro mientras está en una posición fija.

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

quieres saber como hacerlo? Te llevaré detrás de la cortina y te mostraré cómo levantarlo, con nada más que HTML y CSS.

Comencemos con HTML

Lo que estamos haciendo es algo así como un simple efecto de «levantamiento del telón» como este:

El fondo y el texto cambian de color a medida que se desplaza sobre el elemento.

Mantengo las cosas simples para mayor claridad, pero podemos silenciar esto con tres elementos:

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

Primero, necesitamos un contenedor de cortina para dar .curtain Luego dentro del .curtaintenemos una .invert un elemento secundario que servirá como nuestro cuadro «pegajoso». Finalmente, tenemos el contenido dentro de este campo – bueno a la antigua <h2> elemento para este ejemplo en particular.

Configuremos algunas variables CSS

Hay tres valores que sabemos que vamos a necesitar de antemano. Hagamos variables CSS a partir de ellos para que sea fácil escribirlos en nuestros estilos y cambiarlos fácilmente más tarde si es necesario.

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

Es hora de abrir la cortina

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

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

Usamos ::after pseudo-elemento para agregar espacio extra en la parte inferior. De esta manera, nuestro contenido «pegajoso» en realidad se adherirá al contenedor a medida que se desplaza más allá. ::after elemento. Esto 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);
}

Creación de contenido fijo

Luego, debemos hacer que nuestro contenido sea «pegajoso» en el sentido de que se asiente perfectamente dentro del contenedor como valores de color de fondo y texto. De hecho, ya hemos dado .curtainel elemento hijo de ‘s .invert clase que podemos usar como un contenedor pegajoso.

Quédese conmigo por un momento – así es como se desarrollará:

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

¡Ahora pongámoslo 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);
}

Aquí están pasando muchas cosas, así que vamos a explicar cada una.

Primero, tenemos una posición adhesiva, que es en sí misma un cuadro explicativo y flexible para ayudar a centrar el contenido. Nada nuevo o particularmente complicado en esto.

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

EN mix-blend-mode: difference la declaración mezcla nuestro contenido con el fondo difference el valor es complejo, pero puede visualizarlo como el color invertido del texto de fondo. Aquí hay una buena demostración del almanaque CSS-Tricks, que muestra los diferentes mix-blend-mode valores:

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

Demostración «Levantar el telón»

Yo tengo problemas

Tuve algunos problemas mientras trabajaba en los detalles del efecto de «levantamiento de cortina». Por ejemplo, si desea agregar imágenes a contenido «pegajoso», evite usar imágenes que no se ven bien cuando se invierten sus colores. Aquí hay una demostración rápida donde hice un SVG simple y una imagen PNG transparente y se ve bien.

Otro problema: no hay manera de ajustar 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 cancela la mezcla.

Lo mismo ocurre con el uso de algo similar transform: skewY en el contenedor para agregar un poco de «pendiente» a las cosas. Sospecho que otras propiedades no funcionan bien con la mezcla, pero no fui tan lejos como para averiguar cuáles.

Aquí hay una demostración sin desplazamiento que elimina las propiedades perturbadoras:

¡Llama al telón!

Me encantó crear este componente y siempre me gusta cuando puedo lograr algo usando solo HTML y CSS, especialmente cuando funcionan sin problemas en cualquier navegador.

Que harás con eso? ¿Hay alguna forma diferente de abordar el efecto «levantar el telón» de esta manera? Dime en los comentarios!

Deja una respuesta

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

Botón volver arriba