- Best of Parallax-Effect - Webstandard-Blog - Webdesign und Webentwicklung

Best of Parallax-Effect

Inspiration
- 30 Apr, 2009
Kommentare (9)

Das 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 )

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

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

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

inner.geek.nz ( scroll the content )

weallhatequickbooks.com ( resize the Browser - Footer )

dromaeo.com ( resize the Browser - Header )

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

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

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

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

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

www.umaghetzeggen.nl ( move the cursor )

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

www.locomotivation.com ( different Headers )

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

dezignus.com ( move the cursor - Header )

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

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.
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)
Judd Lyon
30 Apr 2009, 18:44

Check the header on Locomotivation as well: http://www.locomotivation.com
shortee
30 Apr 2009, 19:40

Pah, Parallax-Scrolling...
Ich animiere lieber mit marquee-tag :D
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
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
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.
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
MrFahrenheit 17 Jun 2009, 12:17

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