10 CSS- und JavaScript-Snippets zum Erstellen des Parallax-Scrolling-Effekts

Es gibt viel Verwirrung über Parallax-Design und wie es im Web funktioniert. Im Allgemeinen verwendet das Parallax-Design Bewegung, um die Illusion von Tiefe auf einer Seite zu erzeugen.

Dies kann sich auf Hintergrundänderungen oder Elemente mit halbfester Position beziehen, die sich neben dem Scrollen des Benutzers bewegen. Wir haben viele Beispiele von Websites behandelt, sind aber nicht im Detail auf die beteiligten Techniken eingegangen.

Für diese Sammlung habe ich meine bevorzugten CSS- und JavaScript-Snippets zum Erstellen von Parallax-Layouts ausgewählt. Alle Beispiele bieten kostenlosen Quellcode, sodass Sie mit Snippets herumspielen und sie sogar in Ihren eigenen Projekten verwenden können.

1. Der große Fall von CJ Gammon

Dieses Parallaxenbeispiel ist eine der einzigartigsten Schnittstellen, die ich je gefunden habe. Es verwendet ein benutzerdefiniertes Skript, um ein Wasserfall-Sprite zu erstellen, das endlos über die Seite zu fließen scheint. Es wurde auf Canvas-Elementen aufgebaut, die über JavaScript gesteuert werden, also ist es ein ziemlich technischer Aufbau.

Dies ist größtenteils ein Beweis dafür, was in der modernen Webentwicklung möglich ist. Das Erlernen des Canvas-Elements gibt Ihnen viel Kontrolle über Ihr Design.

Sehen Sie sich den Stift The Great Fall von CJ Gammon an

2. CSS-Scrolling-Parallaxe von Sebastian Schepis

Hier ist ein praktischerer Parallax-Effekt mit festem Hintergrund und größeren Seiten darüber. Beim Scrollen erscheint jeder Seitenabschnitt über dem Hintergrund. Dies erzeugt die Illusion von Tiefe und ist eines der Schlüsselelemente für ein hervorragendes Parallax-Design.

Entwickler Sebastian Schepis hat für diese Seite nur CSS verwendet, und es ist ein ziemlich einfaches Konzept. Ich denke, jeder könnte dies mit Leichtigkeit klonen, ganz zu schweigen davon, dass das Hintergrunddesign erheblich verbessert werden könnte.

Siehe den Pen CSS Scrolling Parallax Effect von Sebastian Schepis

3. Simple Image Tag Parallax von Renan Breno

Sie finden oft Parallax-Designs in Verbindung mit großen Vollbild-Hintergrundbildern. Diese sind nur allzu häufig auf Unternehmensseiten und Startups zu finden, wo sie normalerweise eine gewisse parallaxe „Scroll-Geschwindigkeit“ für den Hintergrund aufweisen.

Der Unterschied besteht hier nicht so sehr darin, wie schnell Sie auf der Seite nach unten scrollen oder wie groß die Bildplatzierung ist. Stattdessen sehen Sie, wie schnell sich das Bild beim Scrollen durch den Hintergrund der Seite bewegt. Es ist ein subtiler Parallaxeneffekt, aber dieses Layout ist eine hervorragende Vorlage, um die verschiedenen Animationsgeschwindigkeiten in Aktion zu sehen.

Siehe Pen Simple Image Tag Parallax von Renan Breno

4. Parallaxe- und fixierte Bildhintergründe

Feste Bildhintergründe eignen sich gut, um Seiten aufzuteilen und Inhaltsabschnitte gleichmäßig zu unterteilen. Beim Scrollen kann es vorkommen, dass die einzelnen Seitenabschnitte höher sind als die Hintergrundbilder. Dies alles ist beabsichtigt, um dem Parallax-Effekt beim Scrollen Leben einzuhauchen.

Ich würde genau dieses Layout nicht verwenden, da die Inhaltsbereiche etwas dünn erscheinen. Aber wenn Ihnen dieser Stil gefällt, würde ich empfehlen, jeden Seitenabschnitt mit einem anderen Bild zu unterstreichen, das für Ihre Website relevant ist.

Sehen Sie sich die Pen #Maincode Hackdays von chaobu an

5. CSS-Parallaxe von Paulo Cunha

Dieses Parallaxenbeispiel ist ein einzigartiges Beispiel dafür, wie Parallaxeneffekte funktionieren. Der gesamte Seiteninhalt ruht unter einem großen Heldenbild, das beim Scrollen unter dem Inhalt verschwindet. Dies verwendet auch die feste Bildposition, um den Eindruck zu erwecken, als würde sich die Seite über das Bild bewegen, anstatt dass das Bild an Ort und Stelle bleibt.

Sie können denselben Effekt mit einem langen Scroll-Layout verwenden und es hätte einen ähnlichen Designstil. Dies funktioniert am besten für einzelne Blog-Posts mit großen vorgestellten Bildern oder Zielseiten, die große Helden verwenden, um Aufmerksamkeit zu erregen.

Siehe Pen CSS Parallax von Paulo Cunha

6. Parallax-Design von Katie Rogers

Hier ist ein interessantes Parallax-Design für eine Beispiel-Hochzeitsseite. Es hat ein geteiltes Seitendesign, bei dem Bilder die vielen verschiedenen Inhaltsbereiche mit Parallax-fixiertem Scrollen trennen. Alles läuft auf CSS, was eine nette Geste ist, und alle Hintergrundbilder bleiben fixiert, während sie sich auf der Seite nach unten bewegen.

Dieser Effekt funktioniert, weil die Inhaltsbereiche große Kastenschatten haben, die über die Hintergründe fallen. Dies erzeugt natürlich die Illusion von Tiefe, indem es der Seite eine theoretische Lichtquelle und Hierarchie verleiht – eine sehr schöne Idee für ein Einzelseiten-Layout.

Sehen Sie sich das Pen Parallax Design von Katie Rogers an

7. Scrolling Background-Image Parallax von Rich Howell

Zuvor habe ich erwähnt, wie die Scrollgeschwindigkeit basierend auf der Änderungsrate der Hintergrundposition variieren kann. Dieses Beispiel ist der perfekte Vergleich, um zu sehen, wie dies in Aktion funktioniert.

Beachten Sie, dass Sie die Bildlaufleiste verwenden müssen, um die Auswirkungen dieses Beispiels zu sehen. Ich habe es mit dem Mausrad versucht und konnte keinen Unterschied feststellen, aber Sie werden Geschwindigkeitsänderungen in den Spalten bemerken, wenn Sie die Bildlaufleiste bewegen.

Keine dieser Geschwindigkeiten sind falsche oder ungenaue Darstellungen des Parallaxendesigns. Sie sind nur verschiedene Methoden, um Bewegung auf der Seite zu erzeugen, und dieses kleine Beispiel ist eine großartige Möglichkeit, viele Optionen zu visualisieren.

Siehe Pen Scrolling Background-Image Paralax von Rich Howell

8. Starry Parallax Background von Saransh Sinha

Dieser Effekt bezieht sich zwar nicht auf das Scrollen, aber direkt auf das Parallaxendesign. Es verwendet reines CSS, um eine Parallax-Sternanimation im Hintergrund der Seite zu erstellen. Sie können Text und sogar einen Inhaltsbereich über der Seite hinzufügen, aber die Sterne schaffen auf den ersten Blick sofort Tiefe.

Die Animation läuft über CSS, aber dieses Snippet verwendet Sass und Compass, daher wäre es hilfreich, es zu verstehen, bevor Sie Änderungen vornehmen.

Sehen Sie sich den Pen Parallax Star-Hintergrund in CSS von Saransh Sinha an

9. Leinwand Parallax Skyline von Jack Rugile

Manchmal zielen Parallax-Designs auch auf Mausbewegungen zusammen mit Bildlauffunktionen ab. Dieses Leinwanddesign erzeugt einen endlosen Skyline-Effekt, der auf die Mausbewegung auf der Seite reagiert. Wenn Sie Ihre Maus neu positionieren, ändert sich der Betrachtungswinkel. Aber die Animation bleibt gleich, und Sie können sehen, wie sich diese Skyline mit einer klaren visuellen Hierarchie bewegt.

Dies erfordert natürlich JavaScript für die Animation, da es sich um eine ziemlich komplexe Idee handelt. Aber es ist auch nicht etwas, das Sie auf vielen Websites finden werden, also kopieren Sie es auch nicht auf Ihre Website. Aber als Parallaxenkonzept ist das wirklich interessant.

Sehen Sie sich die Pen Canvas Parallax Skyline von Jack Rugile an

10. Zerbrochener Glasfilter von Bajjy Xilo

Ich habe diesen Effekt schon früher auf Websites gesehen, wodurch ein sehr eigenartiges Design entsteht. Der zerbrochene Glasfilter vermittelt die Illusion eines Hintergrundbildes, das in viele verschiedene Teile aufgeteilt ist. Es sieht fast so aus, als wäre das Bild auf einer Glasscheibe, und es ist zerbrochen, hat das Bild zerbrochen und das Bild verzerrt.

Sie können diesen Effekt mit reinem CSS replizieren, und es ist einer dieser netten Effekte, die cool zu machen sind, aber möglicherweise keine praktische, reale Verwendung über ausgefallene Designs hinaus haben. Dennoch ist dies ein beeindruckendes Beispiel für Parallaxentiefe und -bewegung beim Scrollen.

Siehe den CSS-Filter Pen BrokenGlass von Bajjy Xilo