Best of Parallax-Effect

Parallax EffektDas Parallax Scrolling ein interessanter Effekt ist, der es ermöglicht Bewegung in Eure Webseiten zu bringen, ist durchaus bekannt. Auch das für diesen Effekt lediglich einige Grafiken, ein wenig CSS, etwas (X)HTML und je nach Anforderung auch etwas JavaScript ( ist keine Voraussetzung, denn es geht auch ohne! ) notwendig sind, überrascht vor allem die fortgeschrittenen Anwender wenig. Aber was kann man nun alles mit diesem Parallax-Effekt machen? Die Anwendungsmöglichkeiten sind vielfältig und aus diesem Grund habe ich für Euch an dieser Stelle mal eine kleine aber hoffentlich feine Übersicht an Webseiten herausgesucht, die den Parallax-Effekt für ihre Webseite nutzen.

stephband.info ( move the cursor )
stephband.info

therissingtonpodcast.co.uk ( resize the Browser - Header & Footer )
therissingtonpodcast.co.uk

www.silverbackapp.com ( resize the Browser - Header )
www.silverbackapp.com

www.cdev.ru ( resize the Browser - Header )
www.cdev.ru

inner.geek.nz ( scroll the content )
inner.geek.nz

weallhatequickbooks.com ( resize the Browser - Footer )
weallhatequickbooks.com

dromaeo.com ( resize the Browser - Header )
dromaeo.com

arnaud-k.fr ( move the cursor - Header )
arnaud-k.fr

www.csslab.cl ( resize the Browser - Footer )
www.csslab.cl

www.sebbi.de ( move the cursor - Header )
www.sebbi.de

www.yolcudergisi.com ( move the cursor - Header )
www.yolcudergisi.com

marcofolio.net ( resize the Browser - my favorite! )
marcofolio.net

www.umaghetzeggen.nl ( move the cursor )
www.umaghetzeggen.nl

www.kremalicious.com ( resize the Browser - Header )
kremalicious.com

www.locomotivation.com ( different Headers )
locomotivation.com

www.siebennull.com ( move the cursor - Website )
siebennull.com

dezignus.com ( move the cursor - Header )
dezignus.com

Wer weitere interessante Anwendungsbeispiele des Parallax-Effekt kennt und sie mit anderen teilen möchte, ist hiermit dazu aufgerufen den entsprechenden Link im Kommentarbereich zu kommunizieren. Als Dank winkt neben der Verlinkung zur entsprechenden Seite, auch dem "Finder" ein Backlink ( follow ! ).

  1. arnaud-k
    30 Apr 2009, 14:40

    Nice list ! I would like to add my personal website : arnaud-k.fr I used parallax effect in the header.


  2. Marc
    30 Apr 2009, 14:44

    Hier ist auch eine schöne, weil sehr unauffällige Anwendung:
    http://www.farmhousefare.co.uk/ (Menüpunkte klicken)


  3. Judd Lyon
    30 Apr 2009, 18:44

    Check the header on Locomotivation as well: http://www.locomotivation.com


  4. shortee
    30 Apr 2009, 19:40

    Pah, Parallax-Scrolling...
    Ich animiere lieber mit marquee-tag :D


  5. kremalicious
    01 Mai 2009, 00:05

    Hi! Ich benutze Parallax auf meiner Seite im Header: kremalicious.com

    Habe auch schon mal einen ähnlichen Artikel vor einem Jahr geschrieben, in dem noch ein paar mehr Verwendungen zu finden sind:
    Showcasing the CSS Parallax Effect: 12+1 Creative Usages


  6. Monika
    02 Mai 2009, 14:45

    inner.geek.nz
    mich macht das nervös und ich find es hält mich vom Lesen ab,

    wirkt - sehr *interessant* sag ich als sehr höfliche Frau - all diese Beispiele reizen mich nicht so ... ich vermut das wird noch

    und wozu ich den Browser rezisen sollte als normaler Surfer erschließt sich mir nicht ;)

    lg


  7. Webstandard-Team
    04 Mai 2009, 15:27

    @Monika: Natürlich sind die meisten der Effekte nicht unbedingt für den alltäglichen Gebrauch und schon gar nicht für den "OTTO-Normalverbraucher" geeignet. es geht bei dieser Auflistung lediglich um die Möglichkeiten die der Parallax-Effekt bieten kann. Vor allem den Effekt bezüglich des Cursors könnte man in Webseiten für Kids implementieren, um somit bspw. die Motorik zu üben.


  8. Marc
    20 Mai 2009, 04:37

    So, hat ein bisschen gedauert. Aber ich dachte, dass man aus dem ganzen netten Krempel auch etwas noch gestörteres machen kann ;-)

    Parallax-Overload als Portfolio: Sieben:null - Webdesign aus Karlsruhe


  9. MrFahrenheit 17 Jun 2009, 12:17

    Die Seite www.dezignus.com hat ebenfalls einen Paralax-Header


  10. Ben 27 Jul 2012, 15:33

    Wow, sehr beeindruckend. Schaut euch unsere konferenz-parallax-seite an: www.ideenbeleben.de

    LG,
    Ben


  11. tester 17 Okt 2012, 11:44

    hier noch eine nette parallax Seite:
    http://www.black5.de/


  12. Flo 02 Jan 2013, 19:28

Artikel kommentieren





HTML ist erlaubt und ausdrücklich erwünscht, wobei folgende Tags eingesetzt werden können: <a href="" title=""></a> <b></b> <cite></cite> <code></code> <em></em> <strong></strong>


authimage