Sierra Nevada
Picos de más de 3.000 metros a una hora del mar. Nieve en invierno, rutas de altura en verano y pueblos blancos en sus faldas.
Sube al Veleta al amanecer o recorre los barrancos de la Alpujarra con calma.
En-tête paysage en parallaxe
Montagnes, soleil et titre bougent à des vitesses différentes au défilement et donnent de la profondeur à l'en-tête.
Réglages
Code
<div class="uv-tpl"><div class="sc" tabindex="0" aria-label="Sierra Nevada"><header class="hr"><i class="sky"></i><i class="sun"></i><h3>Sierra Nevada</h3><svg class="l1" viewBox="0 0 400 120" preserveAspectRatio="none" aria-hidden="true"><path d="M0 120V70l60-40 50 30 70-55 60 45 40-20 70 50 50-25v95z"/></svg><svg class="l2" viewBox="0 0 400 120" preserveAspectRatio="none" aria-hidden="true"><path d="M0 120V85l50-25 60 30 50-35 80 40 60-25 50 20 50-10v60z"/></svg><svg class="l3" viewBox="0 0 400 120" preserveAspectRatio="none" aria-hidden="true"><path d="M0 120V100c40-10 80-20 130-8s90 8 140-4 90 6 130 2v30z"/></svg></header><div class="tx"><p>Des sommets de plus de 3 000 mètres à une heure de la mer. Neige en hiver, sentiers d'altitude en été et villages blancs sur les pentes.</p><p>Monte au Veleta à l'aube ou parcours tranquillement les ravins de l'Alpujarra.</p></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éfilementOù l’utiliser
Un en-tête façon voyage composé de crêtes de montagnes en SVG superposées, d'un soleil lumineux et d'un grand titre. Au défilement, chaque couche avance à son rythme : le titre descend le plus vite et passe derrière les sommets, la crête lointaine suit et la plus proche bouge à peine, ce qui donne une vraie impression de profondeur.
Tout est dessiné avec des dégradés CSS et du SVG intégré, sans image à charger. Le script transforme la position de défilement en une seule variable, et en mouvement réduit les couches restent immobiles. Deux couleurs définissent le ciel et les montagnes.