AIMRAN

Cómo trabajamos

01Investigación

Entrevistamos a quien usará el producto.

02Diseño

Prototipos que se pueden tocar en días.

03Desarrollo

Código limpio, rápido y accesible.

04Lanzamiento

Medimos, aprendemos y mejoramos.

HTML + CSSTexte et défilement

Cartes qui s'empilent au défilement

Chaque carte reste collée en haut tandis que la précédente rétrécit et s'assombrit quand la suivante passe dessus.

Réglages

16px
1x

Code

<div class="uv-tsc"><div class="sc" tabindex="0" aria-label="Notre façon de travailler"><h3>Notre façon de travailler</h3><article style="--c:#6366f1;--i:0"><span class="n">01</span><b>Recherche</b><p>Nous interrogeons ceux qui l'utiliseront.</p></article><article style="--c:#ec4899;--i:1"><span class="n">02</span><b>Design</b><p>Des prototypes testables en quelques jours.</p></article><article style="--c:#f59e0b;--i:2"><span class="n">03</span><b>Développement</b><p>Un code propre, rapide et accessible.</p></article><article style="--c:#10b981;--i:3"><span class="n">04</span><b>Lancement</b><p>On mesure, on apprend, on améliore.</p></article><div class="end"></div></div><span class="hn" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M6 13l6 6 6-6"/></svg>Défiler</span></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éfilement

Titre mot à mot

Texte et défilementReact + Motion

Texte en dégradé animé

Texte et défilementReact + Motion

Compteur animé

Texte et défilementReact + Motion

Apparition au défilement

Texte et défilementReact + Motion

Paragraphe keynote

Texte et défilementReact + Motion

Bandeau défilant réactif

Texte et défilementReact + Motion

Titre qui se réécrit

Texte et défilementReact + Motion

Titre qui se déchiffre

Texte et défilementReact + Motion

Où l’utiliser

Une méthode racontée en quatre cartes colorées qui s'empilent au fil du défilement. Chaque carte utilise position sticky avec un décalage un peu plus grand que la précédente, si bien que les bords des étapes passées restent visibles comme un paquet. Quand une nouvelle carte recouvre l'ancienne, celle-ci rétrécit et s'assombrit.

Le défilement se fait dans son propre conteneur, donc l'effet marche dans une démo, une modale ou n'importe quelle section. Un petit script mesure seulement le recouvrement et fixe une variable par carte. Remplace titres, textes et couleurs pour raconter ta propre histoire.