Introduzione
CSS moderno è un potente strumento che è possibile utilizzare per creare molte funzioni avanzate di interfaccia utente (UI). In passato, queste funzionalità si basavano su librerie JavaScript.
In questa guida, si imposta un paio di righe CSS per creare un effetto di parallasse scorrimento su una pagina web. Utilizzerai le immagini da placekitten.com come immagini di sfondo segnaposto.
Avrai una pagina web con un puro effetto di parallasse a scorrimento CSS una volta completato il tutorial.
Attenzione: Questo articolo utilizza proprietà CSS sperimentali che non funzionano tra i browser. Questo progetto è stato testato e funziona su Chrome.
Questa tecnica non funziona bene in Firefox, Safari e iOS a causa di alcune ottimizzazioni di questi browser.
Passo 1 — Creazione di un nuovo progetto
In questo passaggio, utilizzare la riga di comando per impostare una nuova cartella di progetto e file. Per iniziare, apri il tuo terminale e crea una nuova cartella di progetto.
Digitare il seguente comando per creare la cartella del progetto:
- mkdir css-parallax
In questo caso, hai chiamato la cartellacss-parallax. Ora, il cambiamento nel css-parallax cartella:
- cd css-parallax
Avanti, creare un index.html file nel css-parallax cartella con il nano comando:
- nano index.html
Potete mettere tutto il codice HTML per il progetto in questo file.
Nel passaggio successivo, inizierai a creare la struttura della pagina web.
Fase 2 — Impostazione della struttura dell’applicazione
In questa fase, si aggiungerà l’HTML necessario per creare la struttura del progetto.
All’interno del fileindex.html aggiungi il seguente codice:
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>CSS Scrolling Parallax</title> </head> <body></body></html>Questa è la struttura di base della maggior parte delle pagine web che utilizzanoHTML.
Aggiungi il seguente codice all’interno del tag<body>:
<body>... <main> <section class="section parallax bg1"> <h1>Cute Kitten</h1> </section> <section class="section static"> <h1>Boring</h1> </section> <section class="section parallax bg2"> <h1>Fluffy Kitten</h1> </section> </main>...</body>Questo codice crea tre diverse sezioni. Due avranno un’immagine di sfondo e uno sarà uno sfondo statico e semplice.
Nei prossimi passi, si aggiungerà gli stili per ogni sezione utilizzando le classi aggiunte nel HTML.
Passo 3 — Creare un file CSS e aggiungere CSS iniziale
In questo passaggio, si creerà unCSS file. Quindi aggiungerai il CSS iniziale necessario per modellare il sito Web e creare l’effetto parallasse.
Innanzitutto, crea un filestyles.css nella cartellacss-parallax con il comandonano :
- nano styles.css
Questo è dove si metterà tutto il CSS necessario per creare l’effetto di scorrimento parallasse.
Quindi, iniziare con la classe.wrapper. All’interno del file styles.css aggiungi il seguente codice:
.wrapper { height: 100vh; overflow-x: hidden; overflow-y: auto; perspective: 2px;}La classe.wrapper imposta le proprietà di prospettiva e scorrimento per l’intera pagina.
L’altezza del wrapper deve essere impostata su un valore fisso affinché l’effetto funzioni. È possibile utilizzare l’unità viewportvh impostata su100 per ottenere l’intera altezza della finestra dello schermo.
Quando scalate le immagini, aggiungeranno una barra di scorrimento orizzontale allo schermo, quindi puoi disabilitarla aggiungendo overflow-x: hidden;. La proprietàperspective simula la distanza dalla finestra agli pseudo-elementi che creerai e trasformerai più in basso nellaCSS.
Nel passaggio successivo, si aggiungerà più CSS per lo stile della tua pagina web.
Passo 4 — Aggiunta di stili per il .section Class
In questo passaggio, si aggiungeranno stili alla classe.section.
All’interno del filestyles.css aggiungi il seguente codice sotto la classe wrapper:
.wrapper { height: 100vh; overflow-x: hidden; perspective: 2px;}.section { position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; color: white; text-shadow: 0 0 5px #000;}La classe.section definisce le proprietà di dimensione, visualizzazione e testo per le sezioni principali.
Imposta una posizione direlative in modo che il figlio,.parallax::after possa essere assolutamente posizionato rispetto all’elemento genitore.section.
Ogni sezione ha unview-height(vh) di100 per occupare l’intera altezza della finestra. Questo valore può essere modificato e impostato su qualsiasi altezza tu preferisca per ogni sezione.
Infine, le restanti proprietàCSS vengono utilizzate per formattare e aggiungere stile al testo all’interno di ciascuna sezione. Posiziona il testo al centro di ogni sezione e aggiunge un colore di white.
Successivamente, aggiungerai uno pseudo-elemento e lo modellerai per creare l’effetto di parallasse su due delle sezioni nel tuoHTML.
Passo 5 — Aggiunta di stili per il .classe parallax
In questo passaggio, si aggiungeranno gli stili alla classe.parallax.
Per prima cosa, aggiungerai uno pseudo-elemento sulla classe .parallax da disegnare.
Nota: Puoi visitare MDN web docs per saperne di più sugli pseudo-elementi CSS.
Aggiungi il seguente codice sotto la classe.section:
....section { position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; color: white; text-shadow: 0 0 5px #000;}.parallax::after { content: " "; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: translateZ(-1px) scale(1.5); background-size: 100%; z-index: -1;}...La classe.parallax aggiunge uno pseudo-elemento ::after all’immagine di sfondo e fornisce le trasformazioni necessarie per l’effetto parallasse.
Lo pseudo-elemento è l’ultimo figlio dell’elemento con la classe.parallax.
La prima metà del codice visualizza e posiziona l’elemento psuedo. La proprietàtransform sposta lo pseudo-elemento dalla fotocamera suz-index, quindi lo ridimensiona per riempire la finestra.
Poiché lo pseudo-elemento è più lontano, sembra muoversi più lentamente.
Nel passaggio successivo, si aggiungerà nelle immagini di sfondo e lo stile di sfondo statico.
Passo 6 — Aggiungere le immagini e lo sfondo per ogni sezione
In questo passaggio, si aggiungerà il finaleCSS proprietà per aggiungere le immagini di sfondo e il colore di sfondo della sezione statica.
Per prima cosa, aggiungi un colore di sfondo solido alla sezione.static con il seguente codice dopo la classe.parallax::after:
....parallax::after { content: " "; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: translateZ(-1px) scale(1.5); background-size: 100%; z-index: -1;}.static { background: red;}...La classe.static aggiunge uno sfondo alla sezione statica che non ha un’immagine.
Le due sezioni con la classe .parallax hanno anche una classe extra diversa per ciascuna. Utilizzare le classi.bg1 e.bg2 per aggiungere le immagini di sfondo del gattino.
Aggiungi il seguente codice alla classe.static:
....static { background: red;}.bg1::after { background-image: url('https://placekitten.com/g/900/700');}.bg2::after { background-image: url('https://placekitten.com/g/800/600');}...Le classi.bg1, .bg2 aggiungono le rispettive immagini di sfondo per ogni sezione.
Le immagini sono dal sito placekitten. Si tratta di un servizio per ottenere le immagini di gattini da utilizzare come segnaposto.
Ora che tutto il codice per l’effetto di scorrimento parallasse è aggiunto, è possibile collegare al filestyles.cssnel fileindex.html.
Passo 7-Collegamento degli stili.css e indice di apertura.html nel tuo browser
In questo passaggio, collegherai il tuo filestyles.css e aprirai il progetto nel tuo browser per vedere l’effetto di scorrimento della parallasse.
Per prima cosa, aggiungi il seguente codice al tag<head> nel fileindex.html:
...<head> <meta charset="UTF-8" /> <^> <link rel="stylesheet" href="styles.css" /> <^> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>CSS Parallax</title></head>...Ora puoi aprire il fileindex.html nel tuo browser:
Con questo, hai impostato una pagina web funzionante con un effetto di scorrimento. Dai un’occhiata a questo repository GitHub per vedere il codice completo.
Conclusione
In questo articolo, si imposta un progetto con un fileindex.html estyles.css e ora si dispone di una pagina web funzionale. Hai aggiunto nella struttura della tua pagina web e creato stili per le varie sezioni del sito.
E ‘ possibile mettere le immagini che si utilizza o l’effetto di parallasse più lontano in modo che si muovono più lentamente. Dovrai modificare la quantità di pixel sulle proprietàperspective etransform. Se non vuoi che un’immagine di sfondo scorra affatto, usa background-attachment: fixed; invece di perspective/translate/scale.