Parallax Scrolling: Funktionsweise und 8 Beispiele

Barrierefreie Website gestalten
Jochen Seehusen
Jochen Seehusen

Aktualisiert:

Veröffentlicht:

Mit digitalen Kampagnen wird oft das Ziel verfolgt, den Nutzer zu überraschen, zu berühren und ihn tief in die Webseiten-Inhalte eintauchen zu lassen. Der Parallax-Effekt schafft es, genau das auch auf der visuellen Ebene umzusetzen.

Frau beschäftigt sich am Tablet mit Parallax Scrolling

In diesem Beitrag erfahren Sie, was es mit dem optischen Phänomen im Webdesign auf sich hat und von welchen Webseiten Sie sich etwas abschauen können.

→ Leitfaden CSS & HTML für Anfänger [Kostenloser Download]

Optische Täuschung verbessert das Nutzungserlebnis

Abgeleitet ist der Parallax-Effekt von der sogenannten Bewegungsparallaxe: Diese bezeichnet ein Phänomen der Wahrnehmungspsychologie, bei dem sich die Position eines Gegenstandes scheinbar ändert, sobald der Beobachter sich bewegt. Die Bewegungsparallaxe gehört im Alltag zur räumlichen Wahrnehmung dazu und tritt unbemerkt in vielen Situationen auf.

Ein Anwendungsbeispiel zur Illustration: Suchen Sie sich einen Gegenstand in Ihrer unmittelbaren Umgebung und betrachten Sie diesen abwechselnd mit dem linken und dann mit dem rechten Auge – scheinbar bewegt sich der Gegenstand hin und her! In Wirklichkeit verschiebt sich jedoch bloß die eigene Perspektive. Ähnliches können Sie während der Auto- oder Zugfahrt bemerken: Nähere Objekte scheinen hier schneller an Ihnen vorbeizuziehen als weiter entfernte Gegenstände.

Zunächst hat die Spielindustrie und später auch das Webdesign das optische Phänomen auf den Computerbildschirm gebracht, um das Nutzungserlebnis der Konsumenten zu verbessern. Kein Wunder: Durch den starken visuellen Reiz wird der Benutzer noch mehr gefesselt und kann tiefer in den Webseiten-Inhalt eintauchen.

Mit HTML5 und CSS3 Parallax-Effekt erzeugen

Die Entwicklung von HTML5 und CSS3 sorgte dafür, dass der Parallax-Effekt zum echten Trendthema im Webdesign avancierte. Zwar konnte die Parallaxe auch schon vorher auf einer Webseite abgebildet werden, die Weiterentwicklung der Designsprachen ermöglichte es jedoch, vielfältige Animationen und Übergänge einzubinden, die den Effekt visuell weiter unterstützen und intensivieren.

Und so geht‘s:

Um den Effekt darzustellen, legen Sie zunächst einen Container an, der das Element der Parallaxe enthält. Die CSS-Eigenschaft attachment definieren Sie als fixed. Indem Sie das Element fixieren, wird der Parallax-Effekt bereits erzeugt. Durch die Bestimmung weiterer Eigenschaften können Sie das Element visuell an die Webseite anpassen.

Beispiel:

<style>
.parallax {
            /* The image used */
    background-image: url("https://www.hubspot.com/hubfs/assets/hubspot.com/style-guide/brand-guidelines/guidelines_the-logo.svg");
   
   /*Set a specific height*/
   min-height: 500px;
  
/* Create the parallax scrolling effect */
   background-attachment: fixed;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
}
</style>
</head>
<body>
 
<p>Scrollen Sie nach oben und unten, um den Effekt zu sehen </p>
 
<div class="parallax"></div>
 
<div style="height:1000px;background-color:orange;font-size:36px">
Scrollen Sie nach oben und unten, um den Effekt zu sehen.
</div>
 

CSS Eigenschaften Parallax Effekt

Bild: Screenshot w3schools-Editor 

Der Parallax-Effekt erzählt Geschichten

Der visuelle Effekt erfreut sich im Marketing immer größerer Beliebtheit. Vor allem in Storytelling-Formaten können mithilfe von Webdesign packende Geschichten erzählt werden. Klassischerweise wird der Parallax-Effekt für Onepager wie etwa Geschäftsberichte, Kampagnen-Landing-Pages oder Unternehmensvorstellungen genutzt. Durch den Effekt wird die Geschichte auf spannende Weise untermalt und der Beobachter kann das Geschehen noch dynamischer erleben.

Mit der „Nike Better World“-Kampagne setzte die Sportmarke Nike einen Meilenstein in der Nutzung des Parallax-Effekts. Seitdem nutzen immer mehr Unternehmen das Webdesign-Element, um das Nutzererlebnis auf ihrer Webseite zu verbessern.

Nachfolgend finden Sie acht kreative Umsetzungen des Parallax-Effektes:

1. Nike Purpose

2011 als Trendsetter gestartet, setzt der Sportartikelhersteller Nike weiterhin auf den Parallax-Effekt, um seine Webseiteninhalte zu transportieren. Auf der aktuellen Nike Purpose-Landingpage erzählt das Modehaus unter Einsatz des Webdesign-Trends über gemeinsame Ziele und Verantwortlichkeiten in den Bereichen Konsum, Umwelt und Gleichberechtigung.

Frau beim Joggen

Bild: Screenshot purpose.nike.com

2. The Walking Dead Zombified

Die meisten Webseiten bedienen sich der vertikalen Parallaxe. Die „The Walking Dead Zombified“-Webseite hingegen ist ein tolles Beispiel für einen horizontalen Parallax-Effekt. Im Comicstyle wird die Geschichte der gleichnamigen Serie erzählt und Einblicke in „Behind the Scenes“-Wissen gegeben.

Mann mit Wohnwagen im Hintergrund

Bild: Screenshot cabletv.com/the-walking-dead

Scrollt der Nutzer nach unten, bewegt sich der Charakter nach links und läuft durch die Serien-Szenerie. Sprechblasen und Notizen werden eingeblendet und liefern interessante Informationen über die TV-Produktion. Untermalt werden die Grafiken von Sound-Effekten.

3. Aktion Mensch

Dass kreatives Webdesign auch für soziale Projekte umgesetzt werden kann, zeigt Aktion Mensch auf ihrer Landingpage zur UN-Behindertenrechtskonvention. Scrollt der Nutzer auf der Webseite herunter, wird ihm erklärt, was die Konvention beinhaltet und warum sie für die Gesellschaft ein wichtiger Schritt nach vorn ist. Durch den Parallax-Effekt des Zoom-in-Scroll werden dem Besucher stets neue Informationen eingeblendet. Das sorgt dafür, dass die Aufmerksamkeitsspanne aufrechterhalten wird.

Zahnräder vor farbigem HintergrundBild: Screenshot Aktion Mensch

Die Elemente sind nicht nur visuelle Hingucker, sondern erzählen gleichzeitig auf metaphorischer Ebene, weshalb es wichtig ist, an verschiedenen Stellschrauben zu drehen, um Inklusion als Menschenrecht geltend zu machen.

4. Rewe Geschäftsbericht

Der Geschäftsbericht ist für Unternehmen eines der wichtigsten Kommunikationsmittel.  Leider kommt er oft eher altmodisch daher. Die Supermarktkette Rewe wertete ihren Bericht 2018 mithilfe des Parallax-Effekts und weiteren Animationen auf und setzte so ein wichtiges Zeichen für die Unternehmenskommunikation.

Die Animationen bieten den eigentlich eher trockenen Inhalten eine kreative Bühne. Die Umsetzung erfolgte zusammen mit der KD1-Agentur und wurde sogar mit dem Red Dot Design Award ausgezeichnet.

Smartphones mit Rewe DisplayBild: Screenshot Rewe Group

5. WDR Reportage

Der WDR zeigt auf der Webseite zum Super Gravity NRW Cup, wie sich Reportagen im multimedialen Format erzählen und durch verschiedene Webdesign-Elemente aufwerten lassen. In Bild, Text und Video-Inhalten wird über den Wettbewerb der Downhill-Fahrradfahrer berichtet. Wie eine Schriftrolle blättert sich der Beitrag ab und versorgt den User bei jedem Scrollen mit neuen spannenden Erzählungen. Begleitet werden die Animationen durch entsprechende Sound-Effekte.

Mann auf Mountainbike

Bild: Screenshot reportage.wdr.de

6. Lemonaid

Dezent und dennoch gekonnt setzt der Limonadenhersteller Lemonaid den Parallax-Effekt auf der eigenen Über uns-Seite ein. Eine Bildergalerie mit Einblicken in die Marke wird als fixiertes Element genutzt, um als Blickfang die User zu begeistern. Kreative Textinhalte und Grafiken runden die Unternehmensvorstellung ab.

Menschen feiern mit Lemonaid Flaschen

Bild: Screenshot lemon-aid.de

7. Gucci Zumi

Die neue Collection der Gucci Serie „Zumi“ wird digital in einer Erzählung mit parallaxen Effekten erzählt. Illustriert wurde die Webseite von dem Designer Alex Merry. Das Modehaus platziert sein Produkt zwischen expressionistischen Illustrationen mit floralen Mustern, die von audiovisuellen Effekten untermalt werden. Fast wie im Theater bewegt sich der Nutzer beim Scrollen immer weiter durch die „Kulissen“ der Seite.

Tasche vor farbigem Hintergrund

Bild: Screenshot zumi.gucci.com

8. Lime

Der E-Roller Sharing-Service Lime nutzt seine Startseite für eine kreative Vorstellung seines Unternehmens. Beim Scrollen über die Seite werden Grafiken und Textinhalte mit unterschiedlicher Geschwindigkeit eingeblendet und klären den Nutzer über Mobilität in der Stadt und Sicherheit im Straßenverkehr auf. Der Parallax-Effekt sorgt für einen visuellen Hingucker auf der Webseite und unterstützt dabei, die Vision hinter den grün-weißen Rollern anschaulich und modern zu vermitteln.

Porträt-Bilder von verschiedenen Menschen

Bild: Screenshot Lime

Achtung: Parallax-Effekt kann Performance und SEO beeinträchtigen

Im besten Fall verbessert der Parallax-Effekt die User Experience auf Ihrer Website und sorgt für Staunen unter Ihren Besuchern. Sie sollten jedoch unbedingt darauf achten, die Seite nicht zu überladen und die Nutzer nicht mit riesigen Animationen zu überfordern. Zu viele Dateien können außerdem auch zu einer schlechteren Ladezeit führen, was ein wichtiger Rankingfaktor für Suchmaschinen wie Google ist. Unser Tipp: Fügen Sie Bilder und Grafiken daher immer im kleinstmöglichen Format ein.

Zudem können auch weitere SEO-Kriterien unter der Webdesign-Spielerei leiden. So sind fehlende Verlinkungen ebenso zu nennen wie die Schwierigkeit, den Parallax-Effekt in der mobilen Variante fehlerfrei auszugeben. Oftmals ist er hier nur eingeschränkt umsetzbar.

Um die Performance Ihrer Webseite nicht einzuschränken, sondern zu steigern, sollten Sie diese Punkte im Hinterkopf behalten und den Parallax-Effekt nur dort einzusetzen, wo er tatsächlich sinnvoll ist und die größte Wirkung für Sie erzielt.

Richtig eingesetzt können durch den Parallax-Effekt Webseiten-Inhalte noch besser an den Nutzer kommuniziert werden. Vor allem Storytelling-Formate und kreative Onepager werden durch das visuelle Extra aufgewertet. Achten Sie jedoch am besten stets auf die technischen Komponenten, um die Performance Ihrer Webseite nicht durch unnötige Animationen zu überlasten.

css html für anfänger

Titelbild: ijeab / iStock / Getty Images Plu

Themen: CSS Grundlagen

Verwandte Artikel

Mit diesem E-Book können Sie herausfinden, ob Ihre Website inklusiv und barrierefrei ist.

KOSTENLOS HERUNTERLADEN

CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

START FREE OR GET A DEMO