#3 Website Inspiration – Parallax Scrolling und One-Page Websites

In dieser Woche gibt es 15 Websites und 5 WordPress Themes und Website Templates. Ich dachte mir auch, dass es sinnvoll ist, an dieser Stelle auch passende Tutorials und weiterführende Informationen zu verlinken.

Letztes Update: 29.12.2013

15x One-Page, Single-Page und Parallax Websites

Der Fokus steht dieses mal auf sogenannten Single-Page-Websites. Die Seiten bestehen nur aus einer einzigen Seite, auf der sich der komplette Inhalt befindet. Diesem Umstand ist es geschuldet, dass die Webseiten daher meistens nur wenig Inhalt darstellen können. Die Navigation übernimmt die Funktion des Scrollens an die richtige Stelle auf der Seite.

Parallax beschreibt eine Technologie die auf diesen Websites sehr häufig und elegant eingesetzt wird. Hierbei werden die verschiedenen Inhalts- und Hintergrund-Ebenen einer Seite in unterschiedlichen Geschwindigkeiten bewegt. Es lassen sich so schöne Ein- und Ausblende-Effekte erzielen und die Seite erscheint tiefer.

Yookoso – Viele Parallax-Effekte

Liebevoll gestaltete Website mit Parallax-Effekten

Liebevoll gestaltete Website mit Parallax-Effekten

Diese sehr liebevoll gestaltete Website ist für alle, die ein Visum für Japan beantragen möchten. Die Parallax-Effekte mit den Blütenblätter sind äußerst gelungen.

Website besuchen

BTP Design – Minimales Webdesign

Minimales Webdesign

Minimales Webdesign

Die Website der Agentur BTP zeichnet sich durch ihr minimales Webdesign aus. Der Fokus wird auf die Referenzen gelegt, die durch das Design besser zur Geltung kommen.

Website besuchen

Bigcartel – T-Shirt Shop & Minimales Webdesign

Elegante & Innovative E-Commerce Website

Elegante & Innovative E-Commerce Website

Diese E-Commerce Website wurde als Single-Page konzipiert und mit vielen Full-Screen Bildern versehen. Mir gefällt dieses saubere und einfache Webdesign sehr gut.

Website besuchen

Iconfinder – Storytelling One-Page Website

One-Page Website mit CSS3-Effekten

One-Page Website mit CSS3-Effekten

Nach dem Redesign ihres Logos haben sich die Leute von Iconfinder entschieden extra dafür eine Website zu erstellen. Die Website erzählt diese Geschichte mit schönen CSS3-Effekten.

Website besuchen

Whole World Water – Flat Webdesign

Cooles Flat, Content-Centered Webdesign

Cooles Flat, Content-Centered Webdesign

Whole World Water setzt ganz auf das Flat Design. Große Freiräume und jeweils nur eine Botschaft pro Seite zeigen, dass die Macher der Seite Ihr Handwerk verstehen. Sehr gelungen sind auch die kleinen Social Media Icons.

Website besuchen

Flow Media – Kräftiges Webdesign

Farbige Agentur One-Page-Website

Farbige Agentur One-Page-Website

Diese kreative Internet-Agentur zeigt ihr Können direkt auf der eigenen Website mit vielen Farben und coolen Animationen.

Website besuchen

James Hayter – Kreatives Parallax-Scrolling

Minimales Webdesign mit coolen Effekten

Minimales Webdesign mit coolen Effekten

Der Designer James Hayter setzt auch horizontale Parallax-Effekte auf seiner Website ein.

Website besuchen

WNDRMNT – Kreatives Webdesign

Kreative und Kraftvolle Agentur Website

Kreative und Kraftvolle Agentur Website

Die Agentur WNDRMNT hat mit ihrer Website bereits mehrere Preise gewonnen.

Website besuchen

Fatmedia – Coole Parallax-Effekte

Agentur Website mit Parallax-Effekten

Agentur Website mit Parallax-Effekten

Keine echte One-Page-Website aber die Startseite ist im Grunde genauso gestaltet worden. Viele CSS3 und HTML5 Effekte sind zwar sehr schön aber hier eher verwirrend.

Website besuchen

Holler – Scrolling in alle Richtungen

Kreative Agentur Website mit coolem Scrolling

Kreative Agentur Website mit coolem Scrolling

Holler ist eine kreative Agentur, die keine reine Single-Page-Website haben. Sehr interessant ist das Scrolling, dass in alle Richtungen möglich ist.

Website besuchen

Uniform – CSS3 Power

Agentur Website mit coolen CSS3-Animationen

Agentur Website mit coolen CSS3-Animationen

Uniform ist eine norwegische Agentur, die ihr 15-jähriges Jubiläum mit einer Website feiern. HTML5 und CSS3 Power in Kombination mit Flat Design und Retro Farben.

Website besuchen

Browser Awareness Day – Flat Webdesign

Kampagnen Website mit coolem Web Design

Kampagnen Website mit coolem Web Design

Die Website für den „Browser Awareness Day“ setzt auch auf Parallax-Effekte und Flat Design.

Website besuchen

Designed To Move – Cooles Flat Design

Elegante und Moderne One-Page Kampagne

Elegante und Moderne One-Page Kampagne

Die Website der Kampagne „Design To Move“ verwendet viele hochwertige Bilder in Kombination mit Navigationselementen im Flat Design. Die Statistiken werden mit CSS3 animiert und waren mit Sicherheit sehr aufwendig.

Website besuchen

Saucony – Aufwendige CSS3 Effekte

Kampagnen Website für Schuhe

Kampagnen Website für Schuhe

Für den Schuh Kinvara 3 wurde extra eine Website erstellt. Auf dieser Seite wird mit Parallax-Effekten gezeigt wie der Schuh aufgebaut ist. Mit dieser Produktdarstellung, die auch häufig im Technologie-Bereich zu finde ist, wirkt der Schuh besonders hochwertig und innovativ.

Website besuchen

Träfika – Ausgezeichnete Website

Elegante Agentur Website mit Parallax Scrolling

Elegante Agentur Website mit Parallax Scrolling

Die Website der Agentur träfika hat bereits mehrere Auszeichnungen erhalten und setzt auf Parallax-Effekte.

Website besuchen

5x Single-Page WordPress Themes mit Parallax Scrolling

Wenn dir diese Parallax-Effekte besonders gut gefallen, dann habe ich diese 5 WordPress Themes für dich. WordPress ist aus meiner Sicht das beste, kostenlose CMS, dass zur Zeit auf dem Markt verfügbar ist um eine Website schnell und professionell aufzusetzen.

Eleven – Responsive One-Page Parallax WordPress Theme

Kreatives WordPress Template im Flat Design

Kreatives WordPress Template im Flat Design

Das WordPress Theme Eleven ist ein elegantes Template mit Flat Webdesign. Das Theme ist als One-Page Website konzipiert und stellt alle Elemente bereit, die ihr für eine professionelle Website benötigt.

Website besuchen

Argo – Modern OnePage Metro WordPress Theme

Kreatives One-Page WordPress Theme

Kreatives One-Page WordPress Theme

Argo ist ein kreatives One-Page WordPress Theme mit vielen Parallax-Effekten und coolen Layouts.

Website besuchen

HalfCreative – One-Page Portfolio WordPress Theme

Minimales und Elegantes WordPress Theme

Minimales und Elegantes WordPress Theme

Das WordPress Theme HalfCreative wurde minimal und elegant gestaltet. Das Theme eignet sich besonders für kreative Firmen, Agenturen und Freelancer.

Website besuchen

907 – Responsive One-Page Parallax WordPress Theme

Einseitiges Parallax WordPress Theme

Einseitiges Parallax WordPress Theme

Das WordPress Theme 907 wurde stark auf Parallax ausgerichtet und bietet viele verschiedene Optionen.

Website besuchen

SCRN – Responsive Single-Page Portfolio WP Theme

Kreative One-Page Website mit Parallax-Effekten

Kreative One-Page Website mit Parallax-Effekten

SCRN ist ein elegantes One-Page WordPress Theme, dass ebenfalls auf Parallax-Effekte setzt.

Website besuchen

Tutorials und Links

Wer jetzt mehr zu dem Thema One-Page, Single-Page und Parallax-Scrolling wissen möchte, für den habe ich ein paar Links zusammengestellt. Die Tutorials und Links sind aber üblicherweise auf englisch:

Titelbild: 907 One-Page-Parallax Theme – www.themeforest.net