Stackable cards GOC

Ficha técnica

Referencias

• https://codyhouse.co/tutorials/how-stacking-cards
• https://alpinejs.dev/essentials/state#re-usable-data
• https://www.idoven.ai/

Usado en

• gocsa.es

Descripción

Simula un apilado de tarjetas. Utilizo position sticky y en todo momento (inicio, al hacer scroll y al cambiar tamaño de la ventana) a cada tarjeta se le puede aplicar un escalado para hacerla más pequeña en función de la proximidad de las tarjetas que tenga a continuación.

A tener en cuenta:

• Para que funcione correctamente todas las tarjetas tienen que tener el mismo alto.
• Para que no se apilen todas en el mismo punto, de forma que solo se vea la última, a las tarjetas les voy poniendo un top incremental. TODO: Esto hace que el efecto para la última tarjeta no se aplique, probar dejando el mismo top para todas y jugando con un desplamiento en y incremental (pero creo que esto hará que el algoritmo entero no sirva y se tenga que rehacer).
• Las tarjetas tienen que tener un display flex column, con un row-gap. Cuando la distancia entre ellas sea menor que ese row-gap, es cuando se escalarán.