Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

WordPress für Designer: Themes und Layout-Werkzeuge

Parallax Scrolling

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Sehr in Mode gekommen ist das parallaxe Scrollen, also das Verschieben von Elementen beim Scrollen. Hier sehen Sie, wie einfach dieses Scroll-Verhalten in Cornerstone aktiviert werden kann.

Transkript

Als nächstes werden wir uns anschauen, was ist mit dem Paralax Scrolling auf sich hat. Dazu suche ich mir einen Bereich aus. Nehmen wir diesen hier. Hier möchte ich jetzt ein Hintergrundbild einfügen für Paralaxes Scrolling. Das funktioniert auch nur mit Hintergrundbildern. Ich selektiere dazu hier die Section, gehe auf Hintergrundbild und füge dieses ein. In dem Fall benötigen wir wieder etwas, wo links frei ist. Hier haben wir links einiges am freien Bereich, damit da der Text stehen kann. Als nächstes können wir hier unten ein Häkchen setzen, welches standardmäßig schon aktiviert ist, nämlich Parallax. Und was das bewirkt, schauen wir uns nun an, indem ich das Ganze speichere. Und jetzt in der Vorschau, die wir uns mal in einen neuen Tab anschauen. Wenn ich jetzt hier runter scrolle, das Bild ist nicht parallax. Das wird ganz normal hochgescrollt. Aber jetzt kommt das nächste Bild und dieses Bild verhält sich parallax, das heißt der Vordergrund oder die anderen Bereiche scrollen über das Bild hinweg, das Bild ist im Hintergrund. Es bewegt sich auch noch ganz langsam mit und hat somit einen sehr coolen Effekt. Man sieht das mittlerweile auf sehr vielen Seiten, dass diese mit dem Parallax Effekt arbeiten. Wie wir also gesehen haben, ist es kinderleicht. Man muss lediglich hier den Haken setzen. Wie groß der Bereich ist, der hier überscrollt wird, legen wir im dem Fall über Margin und Padding fest. Wir können ganz einfach, hier den Bereich etwas verringern, zum Beispiel auf 5%, oben und unten und nun ist der Bereich viel kleiner, der hier gescrollt werden kann und das hat dann einen etwas anderen Effekt. Ganz nett, sieht es auch aus, dass dieses Gap auch drüber weg scrollt, das wirkt so leicht transparent. Man kann sich überlegen, ob man es raus nimmt, aber in dem Fall lasse ich das einfach drin, weil es einen netten Effekt hat.

WordPress für Designer: Themes und Layout-Werkzeuge

Erstellen Sie Ihre Wordpress-Website mit X-Themes und Cornerstone – ganz ohne Quellcode

5 Std. 8 min (56 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!