Richtung · Horizontale Bewegung
Erfahre, wie parallax-x vertikale in horizontale Bewegung verwandelt – für seitlich reagierende Parallax-Effekte mit Tiefe.
Richtung – horizontale Bewegung mit parallax-x
parallax-x verändert die Bewegungsrichtung eines Elements von vertikal zu horizontal.Sie wird immer zusammen mit einer Geschwindigkeitsklasse wie
parallax-04 oder parallax--04 verwendet.Damit kannst du Parallax-Elemente nicht nur entlang der Scrollrichtung bewegen, sondern auch seitlich gleiten lassen – von links nach rechts oder umgekehrt.
Steuerung der Bewegungsrichtung
Die Intensität der Verschiebung ergibt sich aus der Zahl hinter parallax-.
Je größer der Wert, desto stärker der seitliche Versatz.
parallax-02 parallax-xparallax--02 parallax-xJe höher der Zahlenwert (01–10), desto stärker die Verschiebung und damit der Tiefeneindruck.
<div class="parallax-image parallax-02 parallax-x">
</div>
Steuerung der Bewegungsrichtung im Container
<div>
<div class="parallax-container parallax-01 parallax-x">
</div>
</div>
Gestaltung und Einsatz
- Horizontale Parallax-Galerien: Bilder gleiten leicht gegeneinander.
- Scroll-Sections: Textblöcke oder Icons bewegen sich quer zur Scrollrichtung – ideal für Abwechslung.
- Hero-Banner: Sanfte Seitwärtsbewegung vermittelt Dynamik ohne Unruhe.
Diese Technik eignet sich besonders, um lineare Layouts aufzulockern oder Blickführung zu erzeugen.
SmartParallax Free – Verfügbare Effekte
Basis · Parallax-Struktur
Lerne, wie parallax-image und parallax-container die Basis aller SmartParallax-Effekte bilden – Struktur vor Bewegung
Mehr dazu..Bewegung · Vertikale Bewegung
Erfahre, wie parallax-(–XX) vertikale Bewegungen steuert – vom ruhigen Hintergrund bis zum dynamischen Vordergrund.
Mehr dazu..Verhalten · Bewegungslogik (FREE)
Mit dem Modifikator -s steuerst du das verhalten von parallax- präzise und perfekt getimed beim Scrollen
Mehr dazu..SmartParallax PRO – Verfügbare Effekte
+ Alle SmartParallax Free Effekte
Tiefe · Zoom-Effekte
Entdecke, wie parallax-zoom-(–XX) Tiefe und Raumgefühl erzeugt – durch präzise skalierte Zoom-Bewegungen beim Scrollen.
Mehr dazu..Fokus – Schärfe & Tiefe
Mit parallax-blur-(–XX) setzt du gezielt Unschärfe und Fokus – für realistische Tiefenwirkung und weiche Scroll-Übergänge
Mehr dazu..Sichtbarkeit · Transparenz
Mit parallax-opacity-(–XX) steuerst du Transparenz und Übergänge – von sanften Einblendungen bis zu fließenden Ausfades
Mehr dazu..Drehung · Rotation
Mit parallax-rotate-(–XX) erzeugst du eine sanfte drehung von Elementen beim Scrollen – präzise und flüssig für Texte, Icons oder Grafiken
Mehr dazu..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
Mehr dazu..Ursprung · Transformationspunkt
Mit *parallax-origin-* bestimmst du den ursprung von Zoom-, Rotations- und Bewegungseffekten – präzise Steuerung des Transformationspunkts für jede Parallax-Ebene
Mehr dazu..Analyse · Debug Overlay
Mit ?debug=1 aktivierst du die analyse des SmartParallax-Systems – zeige FPS, aktive Elemente und Performance in Echtzeit
Mehr dazu..