Bewegung · Vertikale Bewegung

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

Starte Bewegung · Vertikale Bewegung

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.