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: Planes con niños en Valencia

@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.






SUSCRÍBETE A NUESTRO BOLETÍN 

No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.










Al suscribirte, aceptas nuestra política de privacidad y nuestros términos de servicio.






Tal vez te puede interesar:

  1. La innovación no puede mantener la Web rápida
  2. Rendimiento web ultrarrápido
  3. Tabla de contenidos fijos con estados activos de desplazamiento
  4. “cambiar tamaño: ninguno;” en áreas de texto es una mala experiencia de usuario

Cartas apiladas con posicionamiento adhesivo y un toque de descaro

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 medid

programar

es

https://aprendeprogramando.es/static/images/programar-cartas-apiladas-con-posicionamiento-adhesivo-y-un-toque-de-descaro-1666-0.jpg

2024-06-13

 

Cartas apiladas con posicionamiento adhesivo y un toque de descaro
Cartas apiladas con posicionamiento adhesivo y un toque de descaro

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences