Hilfe zum Thema

Index > Gestalten ... > Effekte > Paralaxe-Effekte

Paralaxe-Effekte

Der Paralaxe-Effekt bewirkt ein langsameres oder schnelleres Scrollen gegenüber dem übrigen Inhalt, wodurch ein dreidimensionaler Eindruck entsteht.

Sofern die Effekte noch nicht installiert sind, installieren Sie sie bitte über die + Schaltfläche im Effekte-Auswahldialog.

  • back-20
  • back-40
  • back-60
  • fore-20
  • fore40
  • fore-60
Jene Effekte, deren Name mit back- beginnt scrollen langsamer, als wären Sie hinter der Bildschirmebene platziiert. Die mit fore- beginnenden Effekte scrollen schneller und wirken, als ob sie sich vor der Bildschirmebene befänden.

Die Zahl gibt an, um wie viele Pixel das Scrollen beschleunigt bzw gebremst wird.

Gesteuert wird der Paralaxe-Effekt mit einer CSS-Variablen

--paralaxe-offset


Eigene Paralaxe-Effekte hinzufügen:

      1. Öffnen Sie im orangen Menü "globale Stilklassen"
      2. vergeben Sie einen Namen wie z.B. paralaxe.fore-100
      3. --paralaxe-offset: 100px;
      (eine bebilderte Schritt-für-Schritt Anleitung finden Sie unter Scroll-In-Effekte)

      Der erste Teil des Namens paralaxe. ist verpflichtend, der Teil nach dem Punkt kann frei vergeben werden.

      Positive Zahlen (100px) bewirken ein schnelleres Scrollen

      Negative Zahlen (-100px) verlangsamen das Scrollen