Cartas apiladas con posicionamiento fijo y una pizca de descaro | Programar Plus

El otro día, vi esta parte particularmente hermosa del sitio web de Corey Ginnivan donde una colección de tarjetas se apilan una encima de la otra mientras se desplaza.

Empecé a preguntarme cuánto JavaScript implicaría esto y cómo harías para hacerlo cuando me di cuenta, ¡ah! – esto debe ser obra de position: sticky y una pequeña cantidad de Sass. Entonces, sin sumergirme en cómo Corey hizo esto, decidí intentarlo yo mismo.

Primero, algunos estilos predeterminados para las tarjetas:

body {
  background: linear-gradient(#e8e8e8, #e0e0e0);
}

.wrapper {
  margin: 0 auto;
  max-width: 700px;
}

.card {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
  color: #333;
  padding: 40px;
}

A continuación, debemos hacer que cada tarjeta se adhiera a la parte superior del envoltorio. Podemos hacer eso así:

.card {
  position: sticky;
  top: 10px;
  // other card styles
}

Y eso nos deja con esto:

Pero, ¿cómo hacemos que cada uno de estos elementos se vea como una pila uno encima del otro? Bueno, podemos usar un poco de magia Sass para arreglar la posición de cada carta. Primero recorreremos cada elemento de la tarjeta y luego cambiaremos el valor con cada iteración:

@for $i from 1 through 8 {
  .card:nth-child(#{$i}n) {
    top: $i * 20px;
  }
}

Lo que da como resultado esta demostración, que es totalmente encantadora, si lo digo yo mismo:

¡Y ahí lo tenemos! Podríamos hacer algunos cambios visuales aquí para mejorar las cosas. Por ejemplo, el box-shadow y el color de cada carta, como en el ejemplo de Corey. Pero quería seguir experimentando aquí. ¿Qué pasa si cambiamos el orden de las cartas y las hacemos horizontales?

Ya lo hacemos en este mismo sitio web:

Después de experimentar un poco, cambié el orden de las tarjetas con flexbox e hice que cada elemento se deslizara de derecha a izquierda:

.wrapper {
  display: flex;
  overflow-x: scroll;
}

.card {
  height: 60vh;
  min-width: 50vw;
  position: sticky;
  top: 5vh;
  left: 10vw;
}

Pero también quería hacer que cada una de las tarjetas entrara en diferentes ángulos, así que actualicé el bucle Sass con la función aleatoria:

@for $i from 1 through 8 {
  .card:nth-child(#{$i}n) {
    left: $i * 20px;
    left: random(200) + $i * 1px;
    top: random(130) + $i * 1px;
    transform: rotate(random(3) - 2 * 1deg);
  }
}

Esa es la mayor parte de los cambios y eso da como resultado lo siguiente:

Bastante ordenado, ¿eh? amo position: sticky; mucho.