Destinos
Carrousel aimanté qui agrandit le centre
Des cartes horizontales avec scroll snap où la carte centrale grandit et s'éclaire tandis que les côtés rétrécissent.
Réglages
Code
<div class="uv-tsn"><p class="ti">Destinations</p><div class="sc" tabindex="0" aria-label="Destinations"><article style="--a:#86efac;--b:#15803d"><b>Montagne</b></article><article style="--a:#fde68a;--b:#d97706"><b>Désert</b></article><article style="--a:#93c5fd;--b:#1d4ed8"><b>Océan</b></article><article style="--a:#bbf7d0;--b:#166534"><b>Forêt</b></article><article style="--a:#e0f2fe;--b:#0369a1"><b>Glacier</b></article></div></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Texte et défilement
Voir tout : Texte et défilementOù l’utiliser
Une bande horizontale de cartes de destinations qui cale chaque carte au centre. La plus proche du milieu atteint sa taille et son opacité complètes, et ses voisines rétrécissent et pâlissent selon leur distance, ce qui donne un effet coverflow doux sur écran tactile, pavé tactile ou molette.
L'aimantation est du pur CSS avec scroll snap, et un court script mesure la distance de chaque carte au centre pour fixer une variable. La bande reçoit le focus pour défiler avec les flèches et les bords s'estompent avec un masque. Remplace les dégradés par des photos.