Verhalten · Bewegungslogik

Mit den Modifikatoren -s, -g und -r steuerst du das verhalten von parallax-rotate, parallax-zoom und anderen Effekten – präzise und perfekt getimed beim Scrollen

Starte Verhalten · Bewegungslogik

Verhalten – Kontrolle über den Ablauf der Parallax-Effekte

Die Sensitivitäts-Modifikatoren -s, -g und -r bestimmen, wie sich ein Parallax-Effekt innerhalb des Scroll-Ablaufs verhält.
Damit lassen sich Start-, Stop- und Rücklaufpunkte definieren – für Animationen, die sich natürlich in den Scrollfluss einfügen.

Richtung und Wirkung

-s (stop)

Effekt läuft bis zur Mitte und bleibt stehen – gut für Intro- oder Hero-Elemente

-g (go)

Effekt beginnt erst ab der Mitte – ideal für spätes Einsetzen

-r (return)

Effekt läuft symmetrisch hin und zurück – kontinuierliche Bewegung

Die Modifikatoren können an jede unterstützte Klasse angehängt werden, z. B. parallax-zoom-03-r oder parallax-rotate-10-s.

<div class="parallax-image parallax-rotate-10-r">
  
</div>

Wirkung von parallax-rotate-15-s

In diesem Besipiel verwenden wir:

parallax-
parallax-x
parallax-zoom-
parallax-rotate-

Deinen Ideen sind keine Grenzen gesetzt

P A R A L L A X S M R T

Unterstützte Effekte

Nicht jeder Parallax-Effekt reagiert auf alle Modifikatoren gleich.
Die Modifikatoren -s, -g, -r werden nur bei bewegungsbasierten Effekten aktiv.

	-s	-g	-r
`parallax-(--XX)`	✅	✅	✅
`parallax-zoom-(--XX)`	✅	✅	✅
`parallax-rotate-(--XX)`	✅	✅	✅
`parallax-opacity-(--XX)`	🚫	🚫	🚫
`parallax-blur-(--XX)`	🚫	🚫	🚫
`parallax-greyscale-(--XX)`	🚫	🚫	🚫

Gestaltung und Einsatz

Stop (-s): Element stoppt in der Mitte – ruhiger Fixpunkt für Texte oder Logos.
Go (-g): Animation setzt später ein – spannungssteigernd für Folge-Elemente.
Return (-r): Hin- und Her-Bewegung – ideal für Icons, Slider oder Hintergrund-Bewegungen.

Die Modifikatoren machen Parallax-Effekte vorhersehbar und natürlich.

Beispiel-Ideen

Zoom mit Stop (-s)

Drehung startet spät (-g)

Zoom mit Return (-r)