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.
Cabecera de paisaje con parallax
Montañas, sol y título se mueven a velocidades distintas al hacer scroll y dan profundidad a la cabecera.
Ajustes
Código
<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>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.</p><p>Sube al Veleta al amanecer o recorre los barrancos de la Alpujarra con calma.</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>Desplázate</span></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 cabecera de estilo viajero hecha con crestas de montaña en SVG por capas, un sol que brilla y un título grande. Al desplazar el contenido, cada capa se mueve a su ritmo: el título baja más rápido y se esconde tras los picos, la cresta lejana le sigue y la más cercana apenas se mueve, lo que crea una sensación de profundidad creíble.
Todo está dibujado con degradados CSS y SVG en línea, sin imágenes que cargar. El script convierte la posición del scroll en una sola variable y con movimiento reducido las capas se quedan quietas. Dos colores definen el cielo y las montañas.