AIMRAN

Estudio de diseño

Hacemos marcas que se recuerdan

Identidad, web y packaging para gente que hace las cosas con cuidado. Trabajamos desde Valencia con clientes de cualquier parte.

Si llegas hasta el final, sabrás cómo nos llamamos.

HTML + CSSTexte et défilement

Nom de marque géant sous un rideau

En fin de contenu, la carte se lève comme un rideau et dévoile le nom de la marque sur toute la largeur.

Réglages

16px
1x

Code

<div class="uvq14-cur"><div class="sc" tabindex="0" aria-label="Aurora"><article class="cd"><p class="kc">Studio de design</p><h3>On crée des marques qu'on retient</h3><p>Identité, web et packaging pour celles et ceux qui font les choses avec soin. Nous travaillons depuis Valence avec des clients de partout.</p><p>Va jusqu'au bout et tu sauras comment on s'appelle.</p></article><footer class="ft"><nav><a href="#">Instagram</a><a href="#">Mail</a><a href="#">Carte</a></nav><p class="sr">Aurora</p><p class="wm" aria-hidden="true" translate="no">Aurora</p></footer></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.

Version Markdown avec tout le code, pour les assistants IA

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

Beaucoup de sites de studios se terminent par un nom immense caché sous la page, et ce bloc construit cet effet avec un pied de page collant derrière la carte de contenu. Quand la carte s'éloigne, chaque lettre monte depuis le bas à tour de rôle, et le nom est dimensionné pour remplir la largeur quelle que soit sa longueur. Il convient aux sites d'agence et aux portfolios.

Écris le nom de la marque dans le champ de texte et modifie les liens du pied de page. La couleur principale est le fond du pied de page et la secondaire le nom. Les lecteurs d'écran reçoivent le nom une fois en texte, les grandes lettres restant décoratives.