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.
Landschaftskopf mit Parallaxe
Berge, Sonne und Titel bewegen sich beim Scrollen unterschiedlich schnell und geben dem Kopfbereich Tiefe.
Einstellungen
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>Gipfel über 3.000 Meter, eine Stunde vom Meer. Schnee im Winter, Höhenwege im Sommer und weiße Dörfer an den Hängen.</p><p>Steig bei Sonnenaufgang auf den Veleta oder erkunde in Ruhe die Schluchten der 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>Scrollen</span></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Text & Scroll
Alle ansehen: Text & ScrollWofür du ihn nutzen kannst
Ein Kopfbereich im Reisestil aus geschichteten SVG Bergkämmen, einer leuchtenden Sonne und einem großen Titel. Beim Scrollen bewegt sich jede Ebene in eigenem Tempo: Der Titel sinkt am schnellsten hinter die Gipfel, der ferne Kamm folgt, der nächste bewegt sich kaum, was einen überzeugenden Eindruck von Tiefe erzeugt.
Alles entsteht aus CSS Verläufen und eingebettetem SVG, es müssen keine Bilder geladen werden. Das Skript wandelt die Scrollposition in eine einzige Variable um, und bei reduzierter Bewegung bleiben die Ebenen still. Zwei Farben bestimmen Himmel und Berge.