Destinos
Carrusel con imán que escala al centro
Tarjetas horizontales con scroll snap en las que la del centro crece y se ilumina y las laterales se encogen.
Ajustes
Código
<div class="uv-tsn"><p class="ti">Destinos</p><div class="sc" tabindex="0" aria-label="Destinos"><article style="--a:#86efac;--b:#15803d"><b>Montaña</b></article><article style="--a:#fde68a;--b:#d97706"><b>Desierto</b></article><article style="--a:#93c5fd;--b:#1d4ed8"><b>Océano</b></article><article style="--a:#bbf7d0;--b:#166534"><b>Bosque</b></article><article style="--a:#e0f2fe;--b:#0369a1"><b>Glaciar</b></article></div></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Texto y scroll
Ver todos: Texto y scrollDónde usarlo
Una tira horizontal de tarjetas de destinos que encaja cada tarjeta en el centro. La más cercana al medio alcanza su tamaño y opacidad completos, y las vecinas se encogen y se apagan según su distancia, lo que da una sensación suave de coverflow en pantallas táctiles, trackpads y ruedas de ratón por igual.
El encaje es CSS puro con scroll snap y un script corto mide la distancia de cada tarjeta al centro para fijar una variable. La tira recibe el foco para moverse con las flechas y los bordes se desvanecen con una máscara. Cambia los degradados por fotos.