Kostenlose Version

Dokumentation

SmartParallax FREE / Pro – Effektbeschreibung

SmartParallax erweitert jedes Element um dynamische Scroll-Effekte. Diese können auf parallax-image (Hintergrundebenen) und parallax-container (Inhaltscontainer) angewendet werden. Alle Effekte sind kombinierbar und mit den sogenannten Sensitivitäts-Modifikatoren (-s, -g, -r) steuerbar.

Demo ansehen

1. Vertikale Bewegung – parallax-(--XX)

Anwendungsbereich: parallax-image und parallax-container

Steuert die vertikale Bewegung eines Elements beim Scrollen.
Positive Werte bewegen das Element nach unten (in Scrollrichtung), negative Werte bewegen das Element nach oben (entgegen der Scrollrichtung). Der obere Seitenrand (Header) gilt dabei als visuelle Referenzposition.

  • parallax-04 – bewegt sich nach unten (langsamer als der Inhalt, Hintergrundwirkung)
  • parallax--04 – bewegt sich nach oben (schneller als der Inhalt, Vordergrundwirkung)

Demo ansehen

2. Horizontale Bewegung – parallax-x

Anwendungsbereich: parallax-image und parallax-container

Die Klasse parallax-x schaltet die Bewegungsrichtung von vertikal auf horizontal um. Sie wird immer in Kombination mit einer Geschwindigkeitsklasse verwendet.

  • parallax-05 parallax-x – Bewegung von links nach rechts
  • parallax--05 parallax-x – Bewegung von rechts nach links

Demo ansehen

3. Zoom – parallax-zoom-(--XX)

Anwendungsbereich: parallax-image und parallax-container

Zoom-Effekte skalieren das Element abhängig von der Scrollposition. Positive Werte vergrößern zur Mitte hin, negative verkleinern zur Mitte hin.

  • parallax-zoom-05 – klein → groß → klein
  • parallax-zoom--05 – groß → klein → groß

Demo ansehen

4. Blur – parallax-blur-(--XX)

Anwendungsbereich: parallax-image und parallax-container

Steuert die Bildschärfe des Elements. Je höher der Wert, desto stärker die Unschärfe (maximal 12px). Eignet sich, um Tiefenwirkung oder Fokuswechsel beim Scrollen zu simulieren.

  • parallax-blur-10 – unscharf → scharf → unscharf
  • parallax-blur--10 – scharf → unscharf → scharf

Demo ansehen

5. Opacity – parallax-opacity-(--XX)

Anwendungsbereich: parallax-image und parallax-container

Steuert die Transparenz des Elements. Positive Werte blenden zur Mitte ein, negative blenden zur Mitte aus.

  • parallax-opacity-10 – transparent → sichtbar → transparent
  • parallax-opacity--10 – sichtbar → transparent → sichtbar

Demo ansehen

6. Greyscale – parallax-greyscale-(--XX)

Anwendungsbereich: parallax-image und parallax-container

Steuert die Farbintensität des Elements. Positive Werte färben zur Mitte hin ein, negative entfärben zur Mitte hin.

  • parallax-greyscale-10 – grau → farbig → grau
  • parallax-greyscale--10 – farbig → grau → farbig

Demo ansehen

7. Rotation – parallax-rotate-(--XXX)

Anwendungsbereich: parallax-container

Dreht das Element abhängig von der Scrollposition. Ideal für Überschriften, Icons oder visuelle Akzente im Design.

  • parallax-rotate-15 – leichte Drehung zur Mitte
  • parallax-rotate--15 – Drehung entgegengesetzt

Demo ansehen

8. Sensitivität – -s, -g, -r

Anwendungsbereich: für alle Effekte (sofern unterstützt)

Die Sensitivitäts-Modifikatoren steuern, wann und wie ein Effekt aktiv ist. Sie können an jede Effektklasse angehängt werden.

  • -s (Stop) – Effekt läuft bis zur Mitte und stoppt dort.
  • -g (Go) – Effekt startet erst ab der Mitte.
  • -r (Return) – Effekt läuft symmetrisch hin und zurück.
    Wirkt bei parallax-(--XX), parallax-zoom-(--XX) und parallax-rotate-(--XX).

Demo ansehen

9. Kombinationen

Alle Effekte können kombiniert werden, um komplexe Parallax-Szenen zu erstellen.

10. Debug-Modus – ?debug=1

Anwendungsbereich: Entwickler / Performance-Analyse

Durch Anhängen von ?debug=1 an die Seiten-URL wird das Debug-Overlay aktiviert. Es zeigt Echtzeitwerte zu FPS, Rechenzeit und der Anzahl aktiver Parallax-Elemente an. Das Overlay erscheint unten rechts und hilft beim Testen von Performance und Komplexität.

Demo ansehen

11. Ursprung (Transform Origin) – parallax-origin-*

Anwendungsbereich: parallax-image und parallax-container

Mit parallax-origin-* lässt sich der Transformations-Ursprung festlegen. Dieser bestimmt, von welchem Punkt aus Zoom, Rotation und Bewegung wirken. Standardmäßig liegt der Ursprung in der Mitte (center-center).

Syntax: parallax-origin-[vertical]-[horizontal]

  • parallax-origin-top-left
  • parallax-origin-top (alias für top-center)
  • parallax-origin-top-right
  • parallax-origin-center-left
  • parallax-origin-center (Standardwert)
  • parallax-origin-center-right
  • parallax-origin-bottom-left
  • parallax-origin-bottom (alias für bottom-center)
  • parallax-origin-bottom-right

Diese Angabe beeinflusst die Richtung, aus der ein Zoom oder eine Rotation visuell „kommt“.
Beispiel: parallax-zoom-05 parallax-origin-top-left – Zoom startet oben links und skaliert nach unten rechts.

Demo ansehen