Worum geht es?
Ein Bild soll beim Scrollen der Seite den sichtbaren Bildausschnitt mit einer anderen Geschwindigkeit bewegen und dadurch je nach zurückgelegtem Weg andere Bildbereiche zeigen.
Durch übereinander legen mehrerer solcher Parallax-Ebenen kann man beispielsweise einen Tiefeneindruck erzeugen.
Weitere Beispiele
Nachfolgend weitere Beispiele mit jeweils anderen Einstellungen:
mit Blindtext
Auf volle Breite ausdehnen: deaktiviert
Text über dem Parallax-Bild (1. Zeile): Parallax-Bild
Text über dem Parallax-Bild (2. Zeile): mit Blindtext
mit Blindtext
Auf volle Breite ausdehnen: deaktiviert
Besonders darstellen: Dreieck nach unten
Text über dem Parallax-Bild (1. Zeile): Parallax-Bild
Text über dem Parallax-Bild (2. Zeile): mit Blindtext
Auf volle Breite ausdehnen: deaktiviert
Besonders darstellen: abgeschrägt (links unten nach rechts oben)
Auf volle Breite ausdehnen: deaktiviert
Besonders darstellen: abgeschrägt (links oben nach rechts unten)
Geschwindigkeit des Effekts verlangsamt
Auf volle Breite ausdehnen: deaktiviert
Besonders darstellen: abgeschrägt (wechselnd)
Mehrere Parallax-Bilder nebeneinander
Lorem ipsum dolor sit amet
Sed sodales ornare felis in aliquet? Proin at quam accumsan, mattis libero vitae; ullamcorper nunc. In at nisl eu ligula hendrerit malesuada et blandit erat. Quisque eu malesuada justo, nec finibus tortor? Donec ac ultrices dolor. Morbi tristique augue massa, dapibus dignissim arcu mattis a.
Phasellus efficitur, arcu mattis sagittis iaculis, orci ex lobortis nunc, eu sagittis turpis lorem a metus! Nam lobortis euismod augue ac tristique. Suspendisse eu mattis dolor. Nam id orci quis quam euismod.
Auf volle Breite ausdehnen: deaktiviert
Besonders darstellen: nein
Platzierung neben Fließtext
Lorem ipsum dolor sit amet
Sed sodales ornare felis in aliquet? Proin at quam accumsan, mattis libero vitae; ullamcorper nunc. In at nisl eu ligula hendrerit malesuada et blandit erat. Quisque eu malesuada justo, nec finibus tortor? Donec ac ultrices dolor. Morbi tristique augue massa, dapibus dignissim arcu mattis a.
Phasellus efficitur, arcu mattis sagittis iaculis, orci ex lobortis nunc, eu sagittis turpis lorem a metus! Nam lobortis euismod augue ac tristique. Suspendisse eu mattis dolor. Nam id orci quis quam euismod.
Auf volle Breite ausdehnen: deaktiviert
Besonders darstellen: nein
Platzierung neben Fließtext
Das Parallax-Bild kann ohne großen Aufwand von jedem Typo3-Redakteur im Backend zur jeweiligen Seite hinzugefügt werden, denn es taucht in einem eigenen Reiter "Spezielle Seitenelemente" auf.
Somit muss der Redakteur keinerlei Programmierkenntnisse besitzen, da es sich wie jedes andere Typo3 Content-Element verhält und somit bequem und einfach im Backend pflegen lässt.
Was hierzu vom Redakteur benötigt wird? Ein ausreichend aufgelöstes ("großes") Bild, alles Weitere erledigt das Fluid-Template bzw. jQuery Plugin automatisch.
Zusätzlich bietet die Konfiguration des Content Elements noch weitere Einstellungen, bspw. um die Höhe des sichtbaren Bildstreifens zu beeinflussen, Bereiche in Pfeilform auszusparen oder Test über dem Bild anzuzeigen.
Technik-Check
- TYPO3 Content-Element
- umgesetzt in Extbase/Fluid
- kann wie jedes Content-Element in beliebige Seiten/Spalten/Container eingefügt werden
- funktioniert in allen gängigen Desktop- sowie Mobil-Browsern
- basiert auf einem jQuery-Plugin