Cartas apiladas con posicionamiento adhesivo y un toque de descaro

El otro día, vi esta parte particularmente encantadora del sitio web de Corey Ginnivan donde una colección de tarjetas se apila una encima de la otra a medida que te desplazas.

Empecé a preguntarme cuánto JavaScript implicaría esto y cómo lo harías cuando me di cuenta: ¡ah! - Esto debe ser obra de position: stickyy una pequeña cantidad de Sass. Entonces, sin profundizar 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 pegue a la parte superior del envoltorio. Podemos hacerlo así:

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

Y eso nos deja con esto:

Pero, ¿cómo conseguimos que cada uno de estos elementos parezca una pila uno encima del otro? Bueno, podemos usar algo de magia elegante de Sass para fijar 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 color box-shadowy el color de cada tarjeta, como en el ejemplo de Corey. Pero quería seguir experimentando aquí. ¿Qué pasa si cambiamos el orden de las cartas y las ponemos horizontales?

Eso ya lo hacemos en esta misma 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 que cada una de las cartas 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 el resultado es lo siguiente:

Bastante bonito, ¿eh? Te amo position: sticky;tanto.