Come creare un effetto parallasse a strati sul tuo sito

Sep 17, 2025

Come si fa

(Immagine di credito: www.beargrylls.com)

Movimento Parallax, il concetto di strati in movimento a velocità diverse, è stato utilizzato per anni in animazione. Il sito ufficiale di Bear Grylls (uno dei nostri preferiti Siti di scorrimento parallasse. ), prende l'effetto in direzioni nuove e interessanti. Le montagne di sfondo si riducono in posizione, mentre si sbiadiscono in modo che diventino completamente opaco, e sullo sfondo della pagina, il testo "avventura" si alza in posizione dietro le montagne mentre svanisce.

Per effetti di movimento più stimolanti, controlla la nostra guida al meglio Animazioni CSS e come codice .

Il design del sito Bear Grylls è il lavoro dell'Agenzia di marketing creativa del Regno Unito Avamposto , e con un pubblico target che va da 16 a 55 anni, e oltre 7 milioni di seguaci in tutto il mondo, hanno avuto un compito serio sulle loro mani.

"La caratteristica principale del sito web è stata la homepage; volevamo ai visitatori di saltare letteralmente nello schermo e aderire a orso nelle sue avventure", spiega il co-fondatore Chris Wilcock e il direttore creativo Dan Williams. "Per raggiungere questo obiettivo, abbiamo utilizzato alcune transizioni intelligenti, abbinate a video modificati, immagini drammatiche e lingua generale sul sito."

Vedi il sito in azione a www.beargrylls.com. . In questo articolo, spiegheremo come ricreare l'effetto sui tuoi siti. A partire da Download dei file tutorial .

01. Creare l'effetto di ridimensionamento

La struttura per consentire a tutti i contenuti di animazione di lavorare è relativamente semplice. Un wrapper tiene tutto e nasconde qualsiasi contenuto di overflow. Poi ci sono essenzialmente tre strati di tag div sopra la parte superiore.

 & lt; div class = "wrapper" e 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. Avvia il CSS

Per rendere il design, l'immagine del gradiente di sfondo verrà aggiunta al corpo e impostare per riempire la dimensione dello schermo. L'involucro tiene tutti i livelli e il troppopieno per il contenuto è nascosto in modo che possano essere applicati gli effetti di ridimensionamento.

 corpo {
Margine: 0;
Imbottitura: 0;
Altezza: 100%;
Sfondo: URL (img / bg.jpg)
Centro Centro;
Dimensioni di sfondo: copertina;
}
.wrapper {
Larghezza: 100VW;
Altezza: 100VH;
Posizione: relativo;
Overflow: nascosto;
}

03. Posiziona ogni strato

Il codice successivo garantisce che ogni strato sia posizionato assolutamente, uno sopra l'altro, all'interno del wrapper. La dimensione di questo riempie la larghezza e l'altezza della vista in modo che le immagini riempire lo schermo.

 .pos {
Posizione: assoluto;
Top: 0;
a sinistra: 0;
Larghezza: 100VW;
Altezza: 100VH;
}

04. Aggiungi il testo

La classe di testo aggiunge davvero solo l'immagine giusta e imposta la posizione iniziale prima di animarla in posizione usando il andare avanti I fotogrammi chiave che verranno aggiunti nel passaggio finale.

 .Text {
Sfondo: URL (img / text.png)
Centro Centro;
Dimensioni di sfondo: copertina;
Trasforma: Translate3d (0, 30px, 0);
Opacità: 0;
Animazione: Moveup 1.8S Facile-out;
Animazione-Modalità di riempimento: avanti;
}

05. Animazione della prima montagna

La prima montagna è quella più lontana dallo schermo, e questo otterrà un piccolo ridimensionamento che sarà animato. L'opacità di tutti gli strati è anche impostata in modo da comparire in posizione.

 .Mountain1 {
Sfondo: URL (img / mountain1.png)
Centro Centro;
Dimensioni di sfondo: copertina;
Trasforma: scala3D (1.1, 1.1, 1.1);
Opacità: 0.2;
Animazione: scaler 1s facilit-out;
Animazione-Modalità di riempimento: avanti;
}

06. Animare la montagna in primo piano

La montagna per il primo piano è quasi identica all'altra montagna - fa molto più una scala in posizione. Entrambe le montagne condividono i fotogrammi chiave "scaler" per la loro animazione.

 .Mountain2 {
Sfondo: URL (img / mountain2.png)
Centro Centro;
Dimensioni di sfondo: copertina;
Trasforma: scale3d (1.3, 1.3, 1.3);
Opacità: 0.1;
Animazione: scalatore 1.2 per facilitare;
Animazione-Modalità di riempimento: avanti;
}

07. Aggiungi l'animazione del fotogramma chiave

I fotogrammi chiave sono ora creati che specificano. Allo stato di fine del movimento, questo stato finale sarà tenuto in posizione. Il testo viene spostato e le montagne sono ridimensionate, per adattarsi al design.

@key fotogrammi spostati {
100% {
Trasforma: translate3d (0, 0, 0);
Opacità: 1;
}
}

@key fotogramma scalatore {
100% {
Trasforma: scala3d (1, 1, 1);
Opacità: 1;
}
}

generate CSS — Prendi un biglietto per generare css ora per un grande sconto (Immagine di immagine: futuro)

Questo articolo è stato originariamente pubblicato in questione 289 di Web designer - scontato adesso . Iscriviti qui .

Per saperne di più:

Come aggiungere animazione a svg con css
Dos e non fare per deliziose animazioni web
Come progettare con le forme CSS: un'introduzione

Come creare un effetto parallasse a strati sul tuo sito

01. Creare l'effetto di ridimensionamento

02. Avvia il CSS

03. Posiziona ogni strato

04. Aggiungi il testo

05. Animazione della prima montagna

06. Animare la montagna in primo piano

07. Aggiungi l'animazione del fotogramma chiave

Come si fa - Articoli più popolari

Come pulire i pennelli: la guida definitiva

Come cambiare il font nel tuo Instagram Bio

Costruisci un portale client con WordPress

Crea un effetto di aberrazione cromatica

Come dipingere le miniature deliziose

Dipingi un ritratto in stile munch in Photoshop cc

Converti una foto in un set VR

Crea un effetto Splash nel realflow

Categorie