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.
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]](https://no-cache.hubspot.com/cta/default/53/07f1f640-9445-4bbc-861d-5b336e8d2e3d.png)
Was ist Parallax Scrolling?
Das Parallax Scrolling bezeichnet einen Effekt im Webdesign, der entsteht, sobald der Seitenbesucher auf der Webseite scrollt. Die platzierten Elemente bewegen sich mit unterschiedlicher Geschwindigkeit, wodurch optische Bildtiefe erzeugt wird.
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>
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.
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.
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.
Bild: 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.
Bild: 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.
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.
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.
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.
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.
Titelbild: ijeab / iStock / Getty Images Plu
