Parallax Effekt für Contao Webseite

[Mase]

Hallo,

ich würde gerne in eine Contao Onepage-Webseite einen Parallax Effect einbinden. Habe auch schon ein bissl gesucht und gelesen und dachte dabei an das Mootools Parallax Script oder das jquery Parallax Script.
Nur stehe ich gerade irgenwie voll auf'm Schlauch... Wie kann ich das am besten ins Contao einbinden... Klar, Link zum Script im Seitenlayout unter "Zusätzlichen Head Tag" einfügen und dann?!

Muss ich das nun als Modul einbinden? Irgendwie muss man doch bestimmt Klassen, IDs im Layout anlegen bzw. verändern?
Oder ganz dumm gefragt, wie gehe ich am besten vor?


Hat jemand schonmal eine Webseite mit Parallax Effect unter Contao erstellt und kann mir eventuell da bissl auf die Sprünge helfen?

Schonmal Danke.

Grüße
Mase

[ciaobello]

Es gibt Erweiterungen dazu:

http://www.contao-pool.de/ceris/search/parallax.html

vielleicht hilft das schon mal ein bisschen weiter

[Mase]

Hi ciaobello,

danke für den Link. Da bin ich auch schon drauf gestoßen. :-) Ist mir leider nur zu kostspielig...

[andreasisaak]

Hi ciaobello,

danke für den Link. Da bin ich auch schon drauf gestoßen. :-) Ist mir leider nur zu kostspielig...

Ist Parallax immer aber das wirst du, denke ich zumindest, auch bald selber herausfinden. Das Plugin ist nicht umsonst so "kostspielig".

Versuchs mal mit den jQuery Parallax Scripten und der Extension semantic_html5 von uns. Damit solltest du Ergebnisse hinbekommen. Aber Klicki Bunti ist es halt nicht. Du wirst jeden Effekt einzeln in JS oder als Data Attribut konfigurieren müssen.

[Niels H]

Hallo Mase,

ich weiß ja nicht genau, was du vor hast. Aber wenn es sich um einen Scrolleffekt handelt bei dem sich verschiedene Ebenen ineinander verschieben sollen, habe ich es bei der Seite hecht-pharma.com mit Hilfe dieses Demos umgesetzt.

Der einzige Hacken ist, dass der Code nur bis jquery Version 1.6.4 funktioniert. Wenn du aber nicht unbedingt die neuste Version brauchst...

[giorgiojob]

Habe von der Gestaltung her ein interessante Seite gesehen:

http://nationallgbtmuseum.org/#/home/

Dieser Effekt mit den in der Mitte geteilten Seite, die sich dann von alleine zusammenfinden wenn man ca 50% der Seitenhöhe gescrollt hat würde ich auch gerne verwenden.

Glaubt jemand, ob das mit Parallax geht mit entsprechenden Veränderungen oder läuft ides Seite ganz anders?

Vielleicht hat jemand einen Tip wie ich das mit Contao hinbekommen könnte, oder kann gegen Bezahlung unterstützen und das Grundgerüst liefern.

[willshedo]

Die Museumsseite hat imho nichts mit Parallaxe zu tun. Das sind nur zwei Sektionen, eine rauf, eine runter, nix 'Übereinander' wie beim Parallaxeneffekt.
Solche 'Mega-Effekte', die die ganze Seite betreffen, sollte man sich zuerst mal auf einer HTML-Seite ohne Contao nachbauen, bis man dahintergekommen ist, wie das ganze funktioniert. Erst dann auf Contao umstricken - sonst verheddert man sich garantiert.
Welche Scripte verwendet werden, kannst du ja im Quelltext ersehen.

[Bas]

http://nationallgbtmuseum.org/#/home/

Das gefällt mir mal .. und ist ganz einfach gemacht, linke und rechte Hälfte je ein DIV, einer scrollt einfach nur versetzt (siehe goofyScrolller.js: $(settings.defaultScrollingColumn).css("bottom", - $(this).scrollTop());).

Doof ist nur, das die zusammengehörigen Inhalte im Quelltext so ganz und gar nicht zusammen stehen.

[giorgiojob]

Hi ciaobello,

danke für den Link. Da bin ich auch schon drauf gestoßen. :-) Ist mir leider nur zu kostspielig...

Hallo,
ich habe ein Theme mit Parallax für Contao gefunden. Das solltest Du Dir mal ansehen:

https://themes.contao.org/de/themes/parallax.html

[andreasisaak]

Hallo,
ich habe ein Theme mit Parallax für Contao gefunden. Das solltest Du Dir mal ansehen:

https://themes.contao.org/de/themes/parallax.html

Du hast aber schon mitbekommen dass das Theme derzeit ziemlich viel Stress macht und sich nicht mal ordentlich importieren lässt?

[giorgiojob]

Du hast aber schon mitbekommen dass das Theme derzeit ziemlich viel Stress macht und sich nicht mal ordentlich importieren lässt?

Nein habe ich nicht mitbekommen.

Denke wir haben schon mal per Email korrespondiert wegen der Möglichkeiten mit Parallax so etwas umzusetzen wie die Museumsseite: http://nationallgbtmuseum.org/#/home/

Kann man das jetzt ernsthaft so wie auf der Beispielseite mit Parallax machen, oder braucht es dazu eher goofy scroll?

Ich kenn mich nicht so wirklich 100% aus und irgendwie ist das ganze doch noch relativ frisch und es gibt wenig Erklärungen hierzu. Ich weiß nur, daß ich das irgendwie hinbekommen muss und wenn es da keine wirklich handlebare Lösung unter Contao gibt werd ich das Ganze wohl einfach mit HTML hard codieren müssen.

Was denkst du denn dazu?

[kischd]

Mir gefällt der Bildeffekt schon.
Z.B. in der Kicker-App ist das dort in den News mit den Bildern, dass man beim scrollen einen anderen Auschnitt des Bildes sieht.
Funktioniert das nur mit der kostenpflichtigen Erweiterung oder ist das auch relativ einfach selbst einzubinden?