So erstellen Sie einen geschichteten Parallaxe-Effekt auf Ihrer Website

Sep 13, 2025

wie man

(Bildkennung: www.beargryllls.com)

Parallaxe-Bewegung, das Konzept der sich bewegenden Schichten mit unterschiedlichen Geschwindigkeiten, wurde seit Jahren in Animation verwendet. Die offizielle Website des Bärengrylls (einer unserer Favoriten Parallax-Scroll-Sites. ), nimmt die Wirkung in neue und interessante Richtungen auf. Die Hintergrundberge skalieren in Position, während sie sich verblassen, so dass sie voll undurchsichtig werden, und im Hintergrund der Seite steigt der Text "Abenteuer" hinter den Bergen auf, da es verblasst.

Weitere inspirierende Bewegungseffekte finden Sie in unserem Guide zum Besten CSS-Animationen und wie man sie kodiert .

Das Bären-Grylls-Standortdesign ist die Arbeit der britischen kreativen Marketingagentur Vorposten und mit einem Zielpublikum zwischen 16 und 55 Jahren, und über 7 Millionen Anhänger weltweit hatten sie eine ernsthafte Aufgabe an ihren Händen.

"Die Hauptmerkmale der Website war die Homepage; wir wollten, dass Besucher buchstäblich in den Bildschirm springen und Bären auf seinen Abenteuern beitreten", erklären Mitgründer Chris Wilcock und Creative Director dan Williams. "Um dies zu erreichen, haben wir einige clevere Übergänge verwendet, gepaart mit bearbeiteten Videos, dramatischen Bildern und der Gesamtsprache auf der Website."

Sehen Sie den Standort in Aktion an www.beargryllls.com. . In diesem Artikel erklären wir, wie Sie den Effekt auf Ihren eigenen Websites neu erstellen können. Anfangen Laden der Tutorial-Dateien herunter .

01. Erstellen Sie den Skalierungseffekt

Die Struktur, um den gesamten Animationsgehalt zu ermöglichen, ist relativ einfach. Ein Wrapper hält alles und verbirgt jeden Überlaufinhalt. Dann gibt es im Wesentlichen drei Ebenen von DIV-Tags über der Oberseite.

 & lt; div class = "wrapper" & gt;
& lt; div class = "pos text" & gt; & lt; / div & gt;
& lt; div class = "pos mountain1" & gt; & lt; / div & gt;
& lt; div class = "pos mountain2" & gt; & lt; / div & gt;
& lt; / div & gt;

02. Starten Sie die CSS

Um das Design herzustellen, wird das Hintergrundgradientenbild dem Körper hinzugefügt und um die Größe des Bildschirms zu füllen. Der Wrapper hält alle Layer, und der Überlauf für den Inhalt ist ausgeblendet, so dass die Skalierungseffekte angewendet werden können.

 Körper {
Marge: 0;
Polsterung: 0;
Höhe: 100%;
Hintergrund: URL (IMG / BG.JPG)
Zentrumzentrum;
Hintergrundgröße: Abdeckung;
}
.wrapper {
Breite: 100VW;
Höhe: 100VH;
Position: relativ;
Überlauf versteckt;
}

03. Positioniere jede Schicht

Der nächste Code stellt sicher, dass jede Schicht absolut positioniert ist, eines über den anderen, innerhalb des Wrappers. Die Größe dieser Füllt die ViewPort-Breite und Höhe, sodass die Bilder den Bildschirm füllen.

 .Pos {
Position: absolut;
oben: 0;
links: 0;
Breite: 100VW;
Höhe: 100VH;
}

04. Fügen Sie den Text hinzu

Die Textklasse fügt wirklich das richtige Bild hinzu und setzt seine Startposition vor dem Animieren der Animation mit dem Verschiebung Keyframes, die im letzten Schritt hinzugefügt werden.

 .text {
Hintergrund: URL (img / text.png)
Zentrumzentrum;
Hintergrundgröße: Abdeckung;
Transformation: translate3d (0, 30px, 0);
Deckkraft: 0;
Animation: Moveup 1.8s Easy-out;
Animationsfüllmodus: vorwärts;
}

05. Animieren Sie den ersten Berg

Der erste Berg ist der weitere vom Bildschirm entfernt, und dies wird eine kleine Skalierung erhalten, die animiert wird. Die Deckkraft aller Schichten ist auch niedrig eingestellt, so dass sie an Ort und Stelle erscheinen.

 .mountain1 {
Hintergrund: URL (IMG / Mountain1.png)
Zentrumzentrum;
Hintergrundgröße: Abdeckung;
Transformation: Scale3d (1.1, 1.1, 1.1);
Deckkraft: 0,2;
Animation: Scaler 1s Easy-out;
Animationsfüllmodus: vorwärts;
}

06. Animieren Sie den Vordergrundberg

Der Berg für den Vordergrund ist fast identisch mit dem anderen Berg - es macht einfach viel mehr in einem Maßstab. Beide Berge teilen sich die Keyframes 'Scaler' für ihre Animation.

 .mountain2 {
Hintergrund: URL (IMG / Mountain2.png)
Zentrumzentrum;
Hintergrundgröße: Abdeckung;
Transformation: Scale3d (1,3, 1.3, 1.3);
Deckkraft: 0,1;
Animation: Scaler 1.2s Easy-out;
Animationsfüllmodus: vorwärts;
}

07. Keyframe-Animation hinzufügen

Die Keyframes werden jetzt erstellt, die das angibt. Im Endzustand der Bewegung wird dieser Endzustand festgehalten. Der Text wird nach oben bewegt, und die Berge werden nach unten skaliert, um in das Design zu passen.

@keyframes MoveUp {
100% {
Transformation: translate3d (0, 0, 0);
Deckkraft: 1;
}
}

@Keyframes Scaler {
100% {
Transformation: Scale3d (1, 1, 1);
Deckkraft: 1;
}
}

generate CSS — Holen Sie sich ein Ticket, um CSS jetzt für einen großen Rabatt zu generieren (Bildkredite: Zukunft)

Dieser Artikel wurde ursprünglich in Ausgabe 289 von veröffentlicht Webdesigner - jetzt im Sonderangebot . Abonnieren Sie hier .

Weiterlesen:

So fügen Sie SVG mit CSS-Animation hinzu
DOS und Don'ts für reizvolle Web-Animationen
Wie gestaltet man mit CSS-Formen: eine Einführung

So erstellen Sie einen geschichteten Parallaxe-Effekt auf Ihrer Website

01. Erstellen Sie den Skalierungseffekt

02. Starten Sie die CSS

03. Positioniere jede Schicht

04. Fügen Sie den Text hinzu

05. Animieren Sie den ersten Berg

06. Animieren Sie den Vordergrundberg

07. Keyframe-Animation hinzufügen

wie man - Die beliebtesten Artikel

Beginnen Sie mit GAV CMS

Einrichten einer lokalen Entwicklungsumgebung

Malen Sie auf ein 3D-Netz mit ZbrushCores Polypaint-Tool

Erstellen Sie einen Portal-Effekt in Maya

Erstellen Sie eine E-Commerce-Site von Grund auf

So erstellen Sie 3D-Schriftzug in Illustrator

11 Tipps zum Erstellen einer wässrigen Landschaft in 3D

15 Tipps zur Quervorrichtungsoptimierung

Kategorien