Basis · Parallax-Struktur
Lerne, wie parallax-image und parallax-container die Basis aller SmartParallax-Effekte bilden – Struktur vor Bewegung
Basis – Grundlage jedes SmartParallax-Effekts
Die Basis bilden die beiden Kernklassen
parallax-image und parallax-container.Sie erzeugen selbst keine Animation, sondern definieren, wo SmartParallax aktiv werden darf.
Damit sind sie das Fundament für alle späteren Effekte – von Bewegung über Zoom bis Rotation.
Nur Elemente, die eine dieser Klassen tragen, werden vom Script erkannt und für Parallax berechnet.
parallax-image – die visuelle Ebene
parallax-image markiert ein Element als Hintergrundebene.Das können Fotos, Texturen oder Grafiken sein, die später Bewegung oder Tiefe erhalten.
Das Skript registriert diese Ebene automatisch, analysiert ihre Position und bereitet sie für die Transformation vor.
So entsteht der typische Parallax-Look: mehrdimensional und lebendig – aber perfekt kontrollierbar.
<div class="parallax-image">
Erzeugt hier automatisch einen Layer
</div>
parallax-container – der Inhaltsrahmen
parallax-container umschließt einen Bereich, in dem Effekte wirken dürfen.Er ist der sichtbare Abschnitt, der beim Scrollen beobachtet wird.
Innerhalb dieses Containers können weitere
parallax-image-Ebenen liegen oder andere Elemente mit Effekten kombiniert werden.Dadurch entstehen klare, performante Layout-Strukturen.
<div>
<div class="parallax-container"></div>
</div>
Warum die Basis entscheidend ist
Sie sorgen dafür, dass nur relevante Elemente beobachtet und berechnet werden – das spart Rechenzeit und hält die Animation stabil bei 60 FPS.
Erst darauf bauen alle weiteren Effekte auf.
SmartParallax Free – Verfügbare Effekte
Bewegung · Vertikale Bewegung
Erfahre, wie parallax-(–XX) vertikale Bewegungen steuert – vom ruhigen Hintergrund bis zum dynamischen Vordergrund.
Mehr dazu..Richtung · Horizontale Bewegung
Erfahre, wie parallax-x vertikale in horizontale Bewegung verwandelt – für seitlich reagierende Parallax-Effekte mit Tiefe.
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..