You cannot copy content of this page

5 Gratis Parallax Scrolling Plugins für eine bessere Atmosphäre und Funktionalität Eurer Webseiten

/
Oktober 10, 2014

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.

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

ParallaxJS

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.

scrollorama

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.

jQuery Scrolldeck Parallax

Parallax Slider

Mit diesem Parallax Slider lassen sich die Inhalte horizontal scrollen.

Parallax Slider

Parallax Scrolling

Das Plugin von Smashing Magazin erstellt die Illusion von zwei Ebenen, die sich übereinander schieben.

Parallax Scrolling smashing

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.

Über den Autor:

Olga Wirth ist die Kontent-Managerin der deutschen Version von TemplateMonster. (www.templatemonster.com/de). Als eine aufgeschlossene, experimentierfreudige und wissensbegierige Webdesignerin und Psychologin, begeistert sie sich für die Gestaltung von Webseiten und alles was mit Bloggen und Kommunikation zu tun hat.

  • Description
  • Socials
  • Recent Post
  • Comments

37j, Blogger, Webmaster, Betreiber von Foren, Wikis, Projektverwaltungsprojekten mit JIRA, Bitbucket, Confluence, OpenProject, Phabricator und Gitlab Server. Ich finde einen grossen Gefallen an der gegenseitigen Vernetzung und dem Netzwerken mit den zahlreichen BloggerInnen. Ich mache bei Blogparaden mit, promote diese und halte meine Stammleserschaft auf dem Laufenden. Dieses Internetblogger.de-Blog stellt eine Kombination aus Blog und CMS-Shop dar. Im Shop findest du einige CMS-Produkte, die du bestellen kannst.

--------------------------------
Kontakt:
Alexander Liebrecht Internet Services
Alte Warnemünder Ch. 25
18109 Rostock
Germany
Telegram Web: +49 152-05854957
Mail: alexanderliebrecht@internetblogger.de

-------------------------------
Portfolio:
Blog >> INTERNETBLOGGER.de
Forum >> Zum CMS-Forum
Bolt Dienstleistungen>> Bolt Dienstleistungen
Confluence Server >> Confluence Server
Naturprodukte-Shop >> Naturprodukte - Schönheitsprodukte-Shop

24 Comments

  1. av100 - Oktober 10, 2014

    Seit vielen Jahren ist Parallax-Scrolling in aller Munde.

    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

    Reply
    • Alexander - Oktober 10, 2014

      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…

      Reply
  2. Rainer - Oktober 10, 2014

    Hab ich noch nie was von gehört..

    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!

    Reply
  3. Alexander - Oktober 10, 2014

    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.

    Reply
  4. Brotle - Oktober 11, 2014

    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 🙂

    Reply
  5. av100 - Oktober 11, 2014

    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

    Reply
  6. Alexander - Oktober 11, 2014

    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 :-).

    Reply
    • Olga Wirth - Oktober 13, 2014

      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

      Reply
      • Alexander - Oktober 13, 2014

        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.

        Reply
        • Olga Wirth - Oktober 16, 2014

          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!

          Reply
          • Alexander - Oktober 16, 2014

            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 :-).

        • Olga Wirth - Oktober 17, 2014

          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.

          Reply
          • Nataly Ohlsen - Oktober 17, 2014

            Und ich würde mich ebenfalls sehr freuen, wenn du für unseren Blog auch mal einen Gastbeitrag verfasst.

            Alexander, ich auch 🙂

          • perfect-seo.de - Oktober 17, 2014

            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

          • Alexander - Oktober 18, 2014

            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.

  7. Jonas - Oktober 13, 2014

    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

    Reply
  8. Rainer - Oktober 13, 2014

    Aber komplett erstaunlich ist doch, dass wir heutzutage überhaupt solch unglaubliche Möglichkeiten zur Verfügung gestellt bekommen!

    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.

    Reply
    • Olga Wirth - Oktober 17, 2014

      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!

      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?

      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

      Reply
  9. Viktor - Oktober 13, 2014

    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

    Reply
  10. svenskanda - Oktober 13, 2014

    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?

    Reply
  11. perfect-seo.de - Oktober 15, 2014

    @svenskanda
    da hast Du recht. Wer schaltet schon Javascript im Browser ab?
    Ich habe da noch nie dran gedacht.

    Grüße
    Lothar

    Reply
  12. Brotle - Oktober 16, 2014

    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 😀

    Reply
  13. www.maschinengebrauchte.de - Oktober 17, 2014

    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

    Reply
  14. Alexander - Oktober 18, 2014

    Der Alex macht da schon. Bei mir hat er auch schon den einen oder anderen verfasst und ich auch bei ihm.

    @Lothar,
    ja, das sieht ganz so aus und wenn ich mal genug Artikelideen habe, dann kann man es auch mal wieder machen.

    Reply

Leave a Comment

Your email address will not be published.
Die folgenden im Rahmen der DSGVO notwendigen Bedingungen müssen gelesen und akzeptiert werden:
Durch Abschicken des Formulares wird dein Name, E-Mail-Adresse und eingegebene Text in der Datenbank gespeichert. Für weitere Informationen wirf bitte einen Blick in die Datenschutzerklärung.

Wir verwenden Cookies, um Ihnen die beste Online-Erfahrung zu bieten. Mit Ihrer Zustimmung akzeptieren Sie die Verwendung von Cookies in Übereinstimmung mit unseren Cookie-Richtlinien.

Privacy Settings saved!
Datenschutz-Einstellungen

Wenn Sie eine Website besuchen, kann sie Informationen über Ihren Browser speichern oder abrufen, meist in Form von Cookies. Steuern Sie hier Ihre persönlichen Cookie-Dienste.

Diese Cookies sind für das Funktionieren der Website notwendig und können in unseren Systemen nicht abgeschaltet werden.

Zur Nutzung dieser Website verwenden wir die folgenden technisch notwendigen Cookies
  • wordpress_test_cookie
  • wordpress_logged_in_
  • wordpress_sec

Wir nutzen WooCommerce als Einkaufssystem. Für die Warenkorb- und Bestellabwicklung werden 2 Cookies gespeichert. Diese Cookies sind unbedingt erforderlich und können nicht deaktiviert werden.
  • woocommerce_cart_hash
  • woocommerce_items_in_cart

Alle Cookies ablehnen
Alle Cookies akzeptieren