Seit vielen Jahren ist Parallax-Scrolling in aller Munde. Diese Technik wird von Web-Designern seit dem Jahr 2008 verwendet. Einer der ersten Pioniere war der Konzern Nike, die frühesten Anfänge gab es aber sogar bereits in den alten Videospielen, wie z.B. „Sonic the Hedgehog“. Es war einer der Webdesign-Trends der Jahre 2013-2014. Und es sieht ganz so aus, dass Parallax-Scrolling auch 2015 voll im Trend liegen wird.
Inhaltsverzeichnis
Was ist eigentlich Parallax-Scrolling?
Parallax-Scrolling ist eine bestimmte Technik, die in einer Computergrafik mit Hilfe von verschiedenen Bildebenen eine animierte optische Illusion erstellt. D.h., bei dieser Technik werden durch Scrollen die Vordergrundobjekte unterschiedlich schnell zu den Hintergrundobjekten bewegt. Dank dieser Technik wird eine Website lebendig, erreicht einen „WoW“-Effekt und verstärkt die Illusion von Tiefe auf dem Bildschirm. Es ist perfekt für das sogenannte Storytelling.
Immer häufiger stoßen wir im Netz auf Websites, die auf der aktuellen Trendwelle reiten. Die schönen und inspirierenden Beispiele von Parallax Scrolling Designs könnt Ihr Euch in diesem Beitrag „Noch Am Leben, Immer Noch Aktiv: Parallax Scrolling Designs“ anschauen und Euch erste Anregungen holen.
Falls Ihr ein Theme erstellen wollt, das diese Funktionalität aufweist, seht Euch mal die unten aufgelisteten JQuery Parallax Scrolling Plugins an. Parallax Scrolling Plugins sind eine sehr nützliche Hilfe, um den Erstellungsprozess einer Website mit Parallax Scrolling-Effekten zu beschleunigen.
Alle unten aufgelisteten Plugins sind kostenlos, professionell kodiert und benutzerfreundlich, d.h. sie lassen sich ganz einfach installieren.
Parallax.JS
Dies ist ein robustes Parallax-Engine, das Euch ein schnelles und einfaches API zur Verfügung stellt und Euch zu 100% zufriedenstellen wird. Die Bibliothek Parallax.js (von dem Londoner Matthew Wagerfield entwicklelt) arbeitet auch mit den Gyroskopdaten von Smartphones und Tablets.
Eine sehenswerte Video-Anleitung darüber, wie man mit Parallax.JS arbeiten kann, findet Ihr hier
(https://www.youtube.com/watch?v=D9yjTKSUw68)
Scrollorama
Das andere jQuery Plugin zum Erstellen von krassen Sachen im Scrollingbereich ist Scrollorama. Grundsätzlich ermöglicht das Plugin die Animation von Elementen, die auf der Bildlaufposition im Browserfenster basieren.
jQuery Scrolldeck Parallax
Das hier ist eine JavaScript-Bibliothek. Hier ist die Inhaltsbewegung anders als gewohnt: über verschiedene Effekte werden Inhalte beispielsweise eingeblendet oder bewegen sich von der Seite kommend ins Bild.
Parallax Slider
Mit diesem Parallax Slider lassen sich die Inhalte horizontal scrollen.
Parallax Scrolling
Das Plugin von Smashing Magazin erstellt die Illusion von zwei Ebenen, die sich übereinander schieben.
Die oben genannten Plugins mit Parallax-Scrolling-Funktion werden dem allgemeinen Aussehen, der Atmosphäre und der Funktionalität Eurer Webseiten einen großen Schub geben und sie auf ein neues Level bringen. Wenn es andere Plugins mit Parallax-Scrolling-Funktion gibt, die Ihr mögt oder über die Ihr zufällig mal stolpert und die Ihr in dieser Zusammenstellung nicht gefunden habt, teilt dies bitte gerne in den Kommentaren mit.
Hab ich noch nie was von gehört..
Ich hätte mir das gerne angeschaut aber die oben verlinkte Seite
templatemonsterblog.de/parallax-scrolling-designs/
und die shibui.me/web/scroll/index.html
hat bei mir im Firefox ewig geladen und keine Funktionalität gehabt.
Vielleicht ja nur ein temporäres Problem.
Ich werde später nochmal schauen.
Grüße
Lothar
Lothar,
diese beiden Links funktionieren nun und ich war gerade auf Shibui.me und finde das Scrolling dort nicht schlecht.
Man muss gleich wenn die Seite geladen hat, auf der Startseite mit der Maus scrollen und sieht gleich was passiert. Naja, auf einem WordPress-Blog braucht man sowas eher nicht oder…
Hättest du mal in den coolen 1990ern zu den Amiga-spielenden Jünglingen gehört, dann hättest du das gehört. Oder meinst du bei Webseiten. Ich habe das glaub mal vor 1 oder 2 Jahren gehört.
Alex:
Shadow of the Beast für Amiga 500 ist zwei Jahre älter als der erste Sonic. Ob es das erste Spiel mit Parallax Scrolling war weiss ich nicht. Damals hat so etwas in Spielen und Demos glaub ich wirklich einen Wow-Effekt gehabt. Aber heute würde mich so etwas nicht mehr umhauen. Wie du mal wieder siehst, ist das WWW halt nichts wirklich neues.
Da bekomme ich jetzt richtig lust mal wieder einen Amiga zu haben. Amiga, Super NES, Euro Dance und Tekkno … der coole 1990er Lebenstill … was braucht man mehr? 🙂 Ja, ich weiß dieses Jahrzehnt wäre nichts für dich!
Leute, auch für mich ist dieses Scrolling neu und das ist ja nur ein Artikel von einer anderen Person wie ihr gesehen habt. Ich brauche keinen Schnickschnack auf meinen Blogs – obwohl ich hier auch einen Slider habe. Das reicht mir schon.
@Rainer,
ja, die 1990er wären nichts für mich. Da war ich gerade mal 9 und spielte noch im Sandkasten oder doch nicht, was ich nicht mehr so genau weiss.
Ja, das WWW ist schon länger da und wann die erste Mail versendet wurde, weiss ich zwar nicht so genau, aber wahrscheinlich schon vor 30 oder noch mehr Jahren.
Der Name ist mir jetzt auch neu, aber solche Sachen habe ich schon mal bei Handy-Vorstellungen im Internet gesehen.
Außerdem ist es doch auch schön, wenn man im Internet verschiedene Designs und Ansätze verfolgt – wie langweilig wäre es, wenn alle Seiten gleich aussehen würden 🙂
Ja das wäre schon langweilig.Aber so ein Schnick schnack das auch noch ewig laden muss brauche ich nicht.Da hängt sich doch glatt mein Browser auf 🙂
Aber besser der als der Webmaster 🙂
Grüße
Lothar
Dass solche Spielereien lange laden, kann man es sich schon vorstellen und wahrscheinlich ist es auch so. Nun gut, wir haben ja unsere einfache Blogs. Jedoch sehe ich manchmal auf den Blogs ebenfalls, dass viel am Design geschraubt wird. Also, es dürfte auch Schnick-Schnack-Blog-Designs geben. Jedem sein Design :-).
Absolut! Aber komplett erstaunlich ist doch, dass wir heutzutage überhaupt solch unglaubliche Möglichkeiten zur Verfügung gestellt bekommen! Klar ist es definitiv nicht jedermanns Sache, aber die aufgeführten Bespiele beeindrucken wirklich sehr, und ich persönlich betrachte so etwas sowieso als eine Kunst an sich. Ich weiß nicht, ob Ihr alle schon die tolle Sammlung von Parallax Scrolling Designs gesehen habt, die sich auf den oben verlinkten Seiten befindet; einen Blick ist sie auf jeden Fall wert, und wer weiß, vielleicht ist es ja auch etwas, von dem Ihr Euch inspirieren lasst! Ich freue mich auf jeden Fall, dass es für einige von Euch eine Entdeckung war.
LG
Olga
Hallo Olja,
danke, dass du dich hier zu Wort gemeldet hast und etwas erzählt hast. Die Leser freut es immer, wenn ein Gastautor sich zu Wort meldet und seine Meinung nochmals abgibt und auf Kommentare eingeht.
Hallo Alexander!
Hab ich gerne gemacht! Du hast hier eine wirklich tolle Lesergemeinde. Finde ich schön, wenn man sich über verschiedene Aspekte eines Themas so ausführlich austauschen kann. Und es ist auf jeden Fall interessant noch mal festzustellen, wie unterschiedlich wir eine und die gleiche Sache wahrnehmen können! Sonst wäre ja das Leben auch total langweilig! Vielen Dank an allen deinen Lesern für die interessanten Einblicke und Kommentare!
Hallo Olga,
ja, super! Ja, hier habe ich schon etliche Leser und manche sehen eine Sache so, die anderen so. Sehr unterschiedlich das Ganze. Falls du weitere Artikel hast, dann könnte man sie hier auch veröffentlichen :-).
Mit großem Vergnügen! Und ich würde mich ebenfalls sehr freuen, wenn du für unseren Blog auch mal einen Gastbeitrag verfasst.
Alexander, ich auch 🙂
Der Alex macht da schon. Bei mir hat er auch schon den einen oder anderen verfasst und ich auch bei ihm.
So tauscht man sich halt aus 🙂
Grüße
Lothar
Hallo Olga, super das freut mich. Ich werde mir dann mal die Tage etwas überlegen. Welches Thema ich dabei nehmen werde, weiss ich aber noch nicht. Ich lasse mich überraschen.
Hi Nataly, ok, ich schreibe die Tage dann mal was für euren Blog.
Danke für die schöne Auflistung der Plugins!
Ich habe selbst schon mit „jQuery Scrolldeck Parallax“ gearbeitet und positive Erfahrungen gemacht. Finde den Effekt schon ganz schick, wenn man es nicht übertreibt 😉
Schwierig wird es aber wenn die Seite responisve sein soll und auf mobilen Geräten gut aussehen soll…
Viele Grüße, Jonas
Mal ehrlich, was ist an einer Technik, die schon das Nintendo Entertainment System mit 1,77 MHz CPU,.2 KB RAM, 2 KB VIdeo-RAM kann, so erstaunlich?
Was feiert die Internet-Gemeinde als nächstes? 3D-Grafik im Still der Sony Pixelstation 1? 🙂 Den Erfolg der Pixelstation habe ich damals nicht wirklich begriffen. Ich bekam bei den 3D-Spielen immer das sogenannte Augenkrebs. 🙂 So übel war das. 2D war okay.
Fazit: Parallax Scrolling gehört in 2D-Spiele oder Demos, aber nicht auf Webseiten.
Hallo Rainer,
ich denke, dass es in dem Fall nicht so sehr um die Technik selbst geht, sondern viel mehr darum, welche einzigartigen Möglichkeiten sie bietet, und was für wunderschöne Webseiten mit genug Kreativität erstellt werden können. Es ist ja nur ein Werkzeug, und es kann natürlich passieren, dass es in manchen Fällen einfach nicht korrekt eingesetzt wird. Dass es störend wirken kann, das kann ich mir schon vorstellen. Ist ja im Grunde eine völlig individuelle Sache. Danke dir, dass du es mit uns geteilt hast!
Aus meiner Sicht ist und bleibt diese Technik eine sehr coole Sache, egal wie alt sie ist. Für mich ist sie irgendwie zeitlos 😉
LG,
Olga
Ich persönlich halte von nix. Sieht zwar schön aus, aber Java sowie Flash Seiten sind algemein auch bei SEO sind unbeliebt. Schalte mal .js im Browser aus, guckst Du in die Röhre.
LG
Interessantes Thema 🙂
wenn es da ein bissel länger lädt, dann sollte man vielleicht mal wieder seinen Rechner in den Arm nehmen und ihn eine Pause gönnen oder die vielen Webmaster persönlich Fragen – warum sie für eine WebApp 109 Framworks auf einmal laden und aus jeden Framwork nur eine Funktion benutzen – besonders diese jquery Generation –
den oft liegt es nur am falschen Umgang mit der Sprache Javascript –
kurze Frage:
Wir haben 2014 – Warum sollte ich mein Javascript im Browser deaktivieren?
@svenskanda
da hast Du recht. Wer schaltet schon Javascript im Browser ab?
Ich habe da noch nie dran gedacht.
Grüße
Lothar
Ich hatte schon mal ein Problem mit Java-Script, es hat sich praktisch von alleine ausgeschalten – besonders schön war das umhersurfen dann allerdings auch nicht mehr 😀
Ja ohne Java Script läuft doch fast gar nichts mehr aber manchmal hängt sich dann auch zumindest bei mir auch der Firefox Browser auf wenn irgend ein Java Script rumzickt.
Grüße
Lothar
@Lothar,
ja, das sieht ganz so aus und wenn ich mal genug Artikelideen habe, dann kann man es auch mal wieder machen.