Parallax-Scrolling

Verwendung der Symbole

Das Symbol mit dem jeweils gewünschten Scrolleffekt wird in die Seite eingebettet und vom Symbol getrennt (Rechtsklick >> "Unlink from Symbol"). Der Inhalt des Elementes mit der Klasse parallax kann nun angepasst werden.

Einmal am Ende jeder Seite, welche die Parallaxeneffekte verwendet, muss das Symbol parallax-script eingebaut werden, welches die erforderlichen JavaScripte lädt.

Wichtig beim Verwenden der Symbole:
Die Struktur ist ( .parallax-parent ( .parallax ( [Ihr Inhalt] ) ).
Das Kindelement .parallax muss relativ Positioniert sein - dieses Element bekommt auch das data-parallax Attribut.

Anpassung der Effekte

Die Parallaxe wird durch das data-parallax Attribut auf dem betroffenen HTML-Element erstellt und konfiguriert. Dieses Element sollte sich im Regelfall in einem umschließenden Container mit der Klasse parallax-parent befinden.

Als vorkonfigurierte Standardeffekte lassen sich die Werte slow, faster, fast und sticky verwenden.

Alternativ lässt sich eine eigene Konfiguration durch einen JSON-String als Wert von data-parallax vornehmen; die Möglichen Variablen sind in der Tabelle aufgelistet:

Element

Mögliche Werte

Defaultwert

Beschreibung

duration

(String) Absolut || (Number) Faktor

200% der Höhe des Parent (Faktor 2)

Dauer des Scroll-Effektes, wahlweise als Vielfaches des Parent-Containers oder absolut in PX

parent

CSS-Selektor

Elternelement mit der Klasse parallax-parent

HTML-Element (CSS-Selektor) bei dessen Erreichen der Scroll-Effekt beginnt (Triggerpunkt)

distance

(String) Absolut || (Number) Faktor

1 x (Höhe des Parent - Höhe des Child + Offset) (Faktor 1)

Distanz, welche das Element zurücklegt; wahlweise als Vielfaches der Höhe des Parent-Containers oder absolut in PX

offset

Number

100 (px)

Von der Position des Parentelements abweichender Startpunkt in Pixeln (Triggerpunkt)

centerTrigger

Boolean

false

Position des Triggers: Standardmäßig um unteren Ende der Seite, bei true in der vertikalen Mitte

ease

String

linear / none

Mögliche Werte: linear, easeIn, easeOut, easeInOut

Beispiele

Verwendung der vorkonfigurierten Standardwerte

data-parallax="slow"

Erzeugt einen langsamen Scroll-Effekt.

data-parallax="sticky"

Erzeugt einen räumlich begrenzten Pseudo-Sticky-Effekt.

Beispiel einer vollständigen Konfiguration mit absoluter Scrolleffekt-Dauer:

data-parallax="{"duration": "500px", "parent": ".scroll-container-left", "distance": 2, "offset": -10, "centerTrigger": true, "ease": "easeInOut"}"

Der Scrolleffekt auf diesem Element
beginnt 10px bevor die Bildschirmmitte über den Beginn des Elementes mit der Klasse "scroll-container-left" scrollt
bewegt sich am Anfang und am Ende langsamer

läuft bis 500px unter dem Startpunkt gescrollt wurde und legt bewegt sich dabei um die doppelte Höhe des Elternelementes.

Beispiel-Konfigurationen mit relativer Dauer:

{"offset": 0, "duration": 3.5}

Dieses Element beginnt zu scrollen, sobald der untere Rand des Bildschirms das Elternelement mit der Klasse "parallax-parent" erreicht und läuft bis über die dreieinhalbfache Höhe des parallax-parent unter den Startpunkt gescrollt wurde.

{"parent": "#myparentelement", "duration": 1}

Der Effekt läuft hier über die Höhe des Elementes mit der ID "myparentelement".

Beispiel-Konfigurationen mit umgekehrter Bewegung:

data-parallax="{"distance": -1, "centerTrigger": true}"

Dieses Element bewegt sich beim Scrollen von unten nach oben.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Erfolgreich mit Lexware Businessplan

Mit Lexware Businessplan fasst du Deine Geschäftsidee in einem vernünftigen Konzept zusammen. So überzeugst Du Investoren, Banken und Geschäftspartner!

Jetzt kostenlos durchstarten

3. Pseudo-Sticky

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Erfolgreich mit Lexware Businessplan

Mit Lexware Businessplan fasst du Deine Geschäftsidee in einem vernünftigen Konzept zusammen. So überzeugst Du Investoren, Banken und Geschäftspartner!

Jetzt kostenlos durchstarten

4. Größere Parallaxen

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

5. Individuell angepasste Effekte

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Parallax-Scrolling

Verwendung der Symbole

Anpassung der Effekte

Beispiele

Verwendung der vorkonfigurierten Standardwerte

Beispiel einer vollständigen Konfiguration mit absoluter Scrolleffekt-Dauer:

Beispiel-Konfigurationen mit relativer Dauer:

Beispiel-Konfigurationen mit umgekehrter Bewegung:

1. Langsames Parallax-Scrolling

Erfolgreich mit Lexware Businessplan

2. Schnelleres Parallax-Scrolling

Erfolgreich mit Lexware Businessplan

3. Pseudo-Sticky

Erfolgreich mit Lexware Businessplan

4. Größere Parallaxen

Erfolgreich mit Lexware Businessplan

Erfolgreich mit Lexware Businessplan

Erfolgreich mit Lexware Businessplan

5. Individuell angepasste Effekte