Haupt / Wie Man

So erstellen Sie einen mehrschichtigen Parallaxeeffekt auf Ihrer Site

(Bildnachweis: www.beargrylls.com)

Parallax-Bewegung, das Konzept, Ebenen mit unterschiedlichen Geschwindigkeiten zu bewegen, wird seit Jahren in der Animation verwendet. Die offizielle Website von Bear Grylls (einer unserer Favoriten Parallaxen-Bildlaufseiten ), wirkt in neue und interessante Richtungen. Die Hintergrundberge werden verkleinert, während sie ausgeblendet werden, sodass sie vollständig undurchsichtig werden. Im Hintergrund der Seite wird der Text „Abenteuer“ beim Einblenden hinter den Bergen angezeigt.

Weitere inspirierende Bewegungseffekte finden Sie in unserem Leitfaden zu den besten CSS-Animationen und wie man sie codiert .

Das Site-Design von Bear Grylls stammt von der britischen Agentur für kreatives Marketing Vorposten Mit einer Zielgruppe im Alter von 16 bis 55 Jahren und über 7 Millionen Anhängern weltweit hatten sie eine ernsthafte Aufgabe vor sich.

'Das Hauptmerkmal der Website war die Homepage; Wir wollten, dass die Besucher buchstäblich auf den Bildschirm springen und sich Bear bei seinen Abenteuern anschließen “, erklären Mitbegründer Chris Wilcock und Kreativdirektor 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 die Site in Aktion unter www.beargrylls.com . In diesem Artikel wird erläutert, wie Sie den Effekt auf Ihren eigenen Websites wiederherstellen können. Beginnen Sie mit Herunterladen der Tutorial-Dateien .

01. Erstellen Sie den Skalierungseffekt

Die Struktur, mit der alle animierenden Inhalte funktionieren, ist relativ einfach. Ein Wrapper enthält alles und verbirgt jeglichen Überlaufinhalt. Dann gibt es im Wesentlichen drei Schichten von div-Tags über der Oberseite.

02. Starten Sie das CSS

Um das Design zu erstellen, wird das Hintergrundverlaufsbild dem Körper hinzugefügt und so eingestellt, dass es die Größe des Bildschirms ausfüllt. Der Wrapper enthält alle Ebenen, und der Überlauf für Inhalte wird ausgeblendet, sodass Skalierungseffekte angewendet werden können.

body { 		margin: 0; 		padding: 0; 		height: 100%; 		background: url(img/bg.jpg)  		center center; 		background-size: cover; 	} 	.wrapper { 		width: 100vw; 		height: 100vh; 		position: relative; 		overflow: hidden; 	}

03. Positioniere jede Schicht

Der nächste Code stellt sicher, dass jede Ebene absolut übereinander im Wrapper positioniert ist. Die Größe dieses Fensters füllt die Breite und Höhe des Ansichtsfensters aus, sodass die Bilder den Bildschirm ausfüllen.

.pos { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; }

04. Fügen Sie den Text hinzu

Die Textklasse fügt wirklich nur das richtige Bild hinzu und legt seine Startposition fest, bevor sie mit dem animiert wird moveUp Keyframes, die im letzten Schritt hinzugefügt werden.

.text { 		background: url(img/text.png)  		center center; 		background-size: cover; 		transform: translate3d(0, 30px, 0); 		opacity: 0; 		animation: moveUp 1.8s ease-out; 		animation-fill-mode: forwards; 	}

05. Animiere den ersten Berg

Der erste Berg ist derjenige, der weiter vom Bildschirm entfernt ist, und dies wird eine kleine Skalierung erhalten, die animiert wird. Die Deckkraft aller Ebenen ist ebenfalls niedrig eingestellt, damit sie an Ort und Stelle angezeigt werden.

.mountain1 { 		background: url(img/mountain1.png)  		center center; 		background-size: cover; 		transform: scale3d(1.1, 1.1, 1.1); 		opacity: 0.2; 		animation: scaler 1s ease-out; 		animation-fill-mode: forwards; 	}

06. Animieren Sie den Vordergrundberg

Der Berg im Vordergrund ist fast identisch mit dem anderen Berg - er passt einfach viel besser zusammen. Beide Berge teilen sich die Keyframes des Skalierers für ihre Animation.

.mountain2 { 		background: url(img/mountain2.png)  		center center; 		background-size: cover; 		transform: scale3d(1.3, 1.3, 1.3); 		opacity: 0.1; 		animation: scaler 1.2s ease-out; 		animation-fill-mode: forwards; 	}

07. Keyframe-Animation hinzufügen

Es werden jetzt die Keyframes erstellt, die dies angeben. Im Endzustand der Bewegung wird dieser Endzustand an Ort und Stelle gehalten. Der Text wird nach oben verschoben und die Berge werden verkleinert, um in das Design zu passen.

@keyframes moveUp { 		100% { 			transform: translate3d(0, 0, 0); 			opacity: 1; 		} 	}  @keyframes scaler { 		100% { 			transform: scale3d(1, 1, 1); 			opacity: 1; 		} }