Een gelaagd parallax-effect op uw site maken

Sep 11, 2025

Procedures

(Afbeelding Credit: www.beargrylls.com)

Parallax-beweging, het concept van bewegende lagen op verschillende snelheden, is al jaren in animatie gebruikt. De officiële website van Bear Grylls (een van onze favoriet parallax scroll-sites ), neemt het effect op in nieuwe en interessante richtingen. De achtergrondgebergte schaal in positie, terwijl ze worden vervaagd, zodat ze volledig ondoorzichtig worden, en op de achtergrond van de pagina stijgt de tekst 'Adventure' op zijn plaats achter de bergen terwijl deze vervaagt.

Voor meer inspirerende bewegingseffecten, bekijk onze gids naar het beste CSS-animaties en hoe ze te coderen

The Bear Grylls Site Design is het werk van het UK Creative Marketing Agency Buitenpost , en met een doelgroep variërend van 16 tot 55 jaar, en meer dan 7 miljoen volgers wereldwijd, hadden ze een serieuze taak op hun handen.

"Het belangrijkste kenmerk van de website was de startpagina; we wilden dat bezoekers letterlijk in het scherm springen en zich bij zijn avonturen aansluiten," verklaar mede-oprichter Chris Wilcock en Creative Director Dan Williams. "Om dit te bereiken, gebruikten we enkele slimme overgangen, gekoppeld aan bewerkte video's, dramatische beelden en de algehele taal op de site."

Zie de site in actie bij www.beargrysls.com In dit artikel leggen we uit hoe we het effect op uw eigen sites kunnen recreëren. Start op De tutorial-bestanden downloaden

01. Maak het schalende effect

De structuur om alle animatie-inhoud toe te staan, is relatief eenvoudig. Een wikkel bevat alles en verbergt een overloopinhoud. Dan zijn er in wezen drie lagen div-tags over de top.

 & lt; div class = "wrapper" & GT;
& LT; DIV-klasse = "POS-tekst" & 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. Start de CSS

Om het ontwerp te maken, wordt de achtergrondgradiëntafbeelding aan het lichaam toegevoegd en ingesteld om de grootte van het scherm in te vullen. De wrapper bevat alle lagen en de overloop voor inhoud is verborgen, zodat schaalbewerkingen kunnen worden toegepast.

 lichaam {
marge: 0;
Vulling: 0;
Hoogte: 100%;
Achtergrond: URL (IMG / BG.JPG)
centrumcentrum;
Achtergrondformaat: dekking;

.wapper {
Breedte: 100VW;
Hoogte: 100VH;
Positie: familielid;
overloop verborgen;
}

03. Plaats elke laag

De volgende code zorgt ervoor dat elke laag absoluut is gepositioneerd, de ene in de andere, in de verpakking. De grootte hiervan vult de viewportbreedte en -hoogte, zodat de afbeeldingen het scherm vullen.

. Pos {
Positie: absoluut;
Top: 0;
Links: 0;
Breedte: 100VW;
Hoogte: 100VH;
}

04. Voeg de tekst toe

De tekstklasse voegt echt gewoon de juiste afbeelding toe en stelt zijn startpositie in voordat u het op zijn plaats geimeert met behulp van de verplaatsing Keyframes die in de laatste stap worden toegevoegd.

 .Text {
Achtergrond: URL (IMG / Text.png)
centrumcentrum;
Achtergrondformaat: dekking;
Transformeren: Translate3D (0, 30px, 0);
Dekking: 0;
Animatie: MOVEUP 1.8S EAS-OUT;
Animatie-vulmodus: vooruit;

05. Animeer de eerste berg

De eerste berg is verder weg van het scherm, en dit krijgt een kleine schaal die geanimeerd zal zijn. De dekking van alle lagen is ook laag, zodat ze op zijn plaats verschijnen.

 .Mountain1 {
Achtergrond: URL (img / mountain.png)
centrumcentrum;
Achtergrondformaat: dekking;
Transformeren: Schaal3d (1.1, 1.1, 1.1);
Dekking: 0.2;
Animatie: Scaler 1S-gemak;
Animatie-vulmodus: vooruit;

06. Animeer de voorgrondberg

De berg voor de voorgrond is bijna identiek aan de andere berg - het doet gewoon veel meer een schaal op zijn plaats. Beide bergen delen de 'Scaler'-keyframes voor hun animatie.

 .Mountain2 {
Achtergrond: URL (IMG / Mountain2.png)
centrumcentrum;
Achtergrondformaat: dekking;
Transformeren: Schaal3d (1,3, 1.3, 1.3);
Dekking: 0.1;
Animatie: Scaler 1.2S-gemak;
Animatie-vulmodus: vooruit;

07. Voeg keyframe-animatie toe

De keyframes zijn nu gemaakt die dat aangeeft. Aan de eindstatus van de beweging zal deze eindtoestand op zijn plaats worden gehouden. De tekst wordt verplaatst en de bergen worden geschaald, om in het ontwerp te passen.

 @Keyframes MoveUp {
100% {
Transformeren: Translate3D (0, 0, 0);
Dekking: 1;



@KeyFRAMES Scaler {
100% {
Transformeren: Schaal3d (1, 1, 1);
Dekking: 1;

}

generate CSS — Pak een ticket op om CSS nu te genereren voor een grote korting (Beeldkrediet: toekomst)

Dit artikel is oorspronkelijk gepubliceerd in kwestie 289 van Webdesigner nu te koop Abonneer hier

Lees verder:

Hoe animatie toe te voegen aan SVG met CSS
Dos en don'ts voor heerlijke webanimaties
Hoe te ontwerpen met CSS-vormen: een introductie

Een gelaagd parallax-effect op uw site maken

01. Maak het schalende effect

02. Start de CSS

03. Plaats elke laag

04. Voeg de tekst toe

05. Animeer de eerste berg

06. Animeer de voorgrondberg

07. Voeg keyframe-animatie toe

Procedures - Meest populaire artikelen

Stop de bots met Google Recaptcha

Converteer Flash Games naar HTML5

Niveau op uw VR-kunst

Hoe een AR-app te bouwen

Turn 2D illustraties in 3D-art

Maak een geanimeerd 3D-teksteffect

Maak een logo in Illustrator

Maak een splash-effect in RealFlow

Categorieën