Jetzt testen

Bewegung · Vertikale Bewegung

Erfahre, wie parallax-(–XX) vertikale Bewegungen steuert – vom ruhigen Hintergrund bis zum dynamischen Vordergrund.

Bewegung – vertikale Dynamik im SmartParallax-System

Mit der Klasse parallax-(--XX) beginnt jede sichtbare Parallax-Bewegung.
Sie bestimmt, wie stark sich ein Element beim Scrollen verschiebt – und ob es sich langsamer oder schneller als der Seiteninhalt bewegt.
So entsteht der typische räumliche Eindruck: Tiefe im Hintergrund, Lebendigkeit im Vordergrund.
Diese Bewegung kann auf jedes parallax-image oder parallax-container angewendet werden.

Richtung und Wirkung

SmartParallax orientiert sich an der vertikalen Scrollrichtung –
oben Header, unten Footer.
Die Bewegung verhält sich wie folgt:

parallax-02
nach unten (gegen Scrollrichtung)
parallax--02
nach oben (in Scrollrichtung)

Je höher der Zahlenwert (01–10), desto stärker die Verschiebung und damit der Tiefeneindruck.

<div class="parallax-image parallax-02">
  
</div>

Kombination im Container

Lege Container übereinander und erziele geniale Effekte

<div>
  <div>
    <div> -> scale(1.2)
      Hintgrund-1.jpg
    </div>
  </div>
  <div> -> scale(1.2)
    <div class="parallax-image parallax--01">
      Hintergund-2.jpg
    </div>
  </div>
  <div> scale(1.2)
    <div class="parallax-image parallax--02">
      Hintergund-3.jpg
    </div>
  </div>
</div>

Technische Details

SmartParallax berechnet jede Position in Echtzeit auf Basis der Scrollprogression.
Nur sichtbare Elemente werden getrackt – das hält die Animation flüssig (60 FPS) und ressourcenschonend.
Alle Bewegungen sind CSS-transform-basiert, ohne Reflow oder Layout-Jitter.

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 Bewegungs­effekten – präzise Steuerung des Transformations­punkts 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..

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..

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..