Il CSS moderno ha ridefinito lo sviluppo web con le sue potenti funzionalità e le sue straordinarie capacità. CSS è uno strumento versatile che offre opzioni eccezionali per rendere le pagine web altamente interattive e accattivanti. Che si tratti di flessibilità nel design, personalizzazione rapida, eccellenti opzioni di stile o dell'interfaccia utente (UI) avanzata, il CSS offre soluzioni end-to-end per tutte le esigenze di sviluppo e stile web. Soprattutto, utilizzando CSS e HTML, puoi aggiungere animazioni ed effetti scrivendo solo poche righe di codice, cosa che altrimenti sarebbe faticosa usando JavaScript.
In questa guida, ti guideremo attraverso i passaggi per creare un effetto di scorrimento parallasse con CSS in Chrome.
Prerequisiti
Per seguire questo tutorial, è necessario avere una comprensione di base di HTML e CSS.
Passo 1: Crea un nuovo progetto
Iniziamo creando una nuova cartella di progetto e i relativi file utilizzando l'interfaccia a riga di comando. Apri il terminale e digita il seguente comando per creare una nuova cartella di progetto:
|
1 |
mkdir css-parallax |
Usa il comando cd per cambiare la directory nella cartella css-parallax :
|
1 |
cd css-parallax |
Successivamente, crea un file HTML nella cartella css-parallax dove inseriremo tutti i codici HTML. Rinomina il file index.html e aprilo utilizzando il comando nano :
|
1 |
nano index.html |
Una volta che il nostro file index.html è pronto, andiamo avanti e strutturiamo la pagina web aggiungendo i codici introduttivi HTML .
Passo 2: Struttura dell'HTML di base
In questo passaggio, progetteremo la nostra pagina web aggiungendo i codici HTML . Aggiungi le seguenti righe di codice nel file index.html :
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Effetto scorrimento parallasse con CSS</title> </head> <body></body> </html> |
Dopo aver impostato la struttura di base delle nostre pagine web, crea tre classi di sezione: due per le immagini di sfondo e una per lo sfondo statico a tinta unita. Successivamente, aggiungi le seguenti righe di codice nel tag <body> :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<body> ... <main class="wrapper"> <section class="section parallax bg1"> <h1>Prima dell'effetto scorrimento parallasse</h1> </section> <section class="section static"> <h1>Benvenuto nello scorrimento parallasse</h1> </section> <section class="section parallax bg2"> <h1>Dopo l'effetto scorrimento parallasse</h1> </section> </main> ... </body> |
L'inserimento dei codici HTML nel tag <body> completa la configurazione di base del nostro file.HTML. Nei prossimi passaggi, introdurremo il CSS e definiremo le opzioni di stile per ciascuno.
Passo 3: Introduzione al CSS
Diamo stile al sito web aggiungendo il file CSS e creando l'effetto parallasse. Innanzitutto, crea un file CSS nella cartella css-parallax cartella in cui inseriremo tutti i codici CSS necessari per creare l'effetto di scorrimento parallasse. Successivamente, inserisci un styles.css file nella tua css-parallax cartella utilizzando il comando nano :
|
1 |
nano styles.css |
Definiremo lo stile della nostra pagina web a partire dalla classe .wrapper . La classe .wrapper imposta le proprietà di prospettiva e scorrimento per l'intera pagina. Inizia con la classe wrapper e specifica la sua altezza, overflow e prospettiva. Imposta l'altezza del wrapper su un valore costante affinché l'effetto di scorrimento parallasse funzioni. In questa guida, abbiamo impostato il valore del viewport utilizzando 100vh per ottenere l'altezza completa del viewport dello schermo. Puoi modificare il valore vh in base alle esigenze del tuo progetto. Successivamente, disabilita la barra di scorrimento orizzontale dello schermo impostando la proprietà overflow-x come hidden. Inoltre, specifica il valore della proprietà perspective come 3px. Aggiungiamo le seguenti righe di codice nella classe del file styles.css :
|
1 2 3 4 5 6 |
.wrapper { height: 100vh; overflow-x: hidden; overflow-y: auto; perspective: 2px; } |
Passo 4: Aggiungere lo stile per la classe .section
Accanto alla classe wrapper, aggiungi gli stili alla classe .section . La classe .section definisce le proprietà di dimensione, visualizzazione e testo per le sezioni principali. Imposta la posizione come relative per allineare un posizionamento relativo dell'elemento figlio .parallax::after e dell'elemento genitore .section. Mantieni la view-height(vh) come 100 per ottenere l'altezza completa del viewport dello schermo. Aggiungi, modifica e definisci lo stile degli altri parametri in base alle tue esigenze.
All'interno del tuo file styles.css aggiungi il seguente codice accanto alla classe wrapper:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.wrapper { height: 100vh; overflow-x: hidden; perspective: 3px; } .section { position: relative; height: 100vh; transform-style: preserve-3d; display: flex; align-items: center; justify-content: center; color: red; text-shadow: 0 0 5px #000; } |
Successivamente, aggiungeremo un pseudo-elemento e ne definiremo lo stile per creare l'effetto parallasse e metterlo in azione.
Passo 5: Aggiungere gli stili per la classe .parallax
In questo passo, aggiungeremo un pseudo-elemento su .parallax. Questo pseudo-elemento sarà l'ultimo figlio dell'elemento e aggiungerà un pseudo-elemento ::after all'immagine di sfondo responsabile dell'avvio dell'effetto parallasse. Nella prima metà del codice, vengono impostate la specifica di visualizzazione di base e il posizionamento del pseudo-elemento. Nella metà successiva, aggiungeremo la proprietà transform utilizzando la funzione CSS translateZ() e la manterremo come (-1px). Inoltre, aggiungi un z-index per controllare l'ordinamento verticale.
Aggiungi il seguente codice sotto la classe .section :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
... .section { position: relative; height: 100vh; transform-style: preserve-3d; 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; background-attachment: fixed; transform: translateZ(-1px) scale(2.0); background-size: 100%; z-index: -1; } ... |
Passo 6: Aggiungere immagini e sfondo per ogni sezione
Aggiungiamo le proprietà CSS finali nelle immagini di sfondo e nel colore di sfondo della sezione statica. Inizia aggiungendo un colore di sfondo a tinta unita alla sezione .static . Imposta il colore di sfondo come aqua e aggiungi il seguente codice dopo la classe .parallax::after :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
... .parallax::after { content: " "; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-attachment: fixed; transform: translateZ(-1px) scale(2.0); background-size: 100%; z-index: -1; } .static { background: aqua; } ... |
La classe .static aggiunge uno sfondo alla sezione statica che non ha un'immagine. Le altre due sezioni con la classe .parallax hanno classi uniche destinate a contenere le immagini di sfondo. Aggiungi gli URL delle immagini di sfondo nelle classi .bg1 e .bg2 rispettivamente.
In questo tutorial, utilizzeremo immagini casuali da Unsplash. Puoi anche utilizzare immagini da altri siti web come Pixapay, Placekitten, e Pexels, solo per citarne alcuni, e personalizzarle come preferisci. Aggiungi il seguente codice alla classe .static :
|
1 2 3 4 5 6 7 8 9 10 |
... .static { background: aqua; } .bg1::after { background-image: url('https://images.unsplash.com/photo-1496543622559-12e927bdd81b'); } .bg2::after { background-image: url('https://images.unsplash.com/photo-1516422641841-cd9803ab02c6'); ... |
Passo 7: Collegare il CSS con l'HTML
Ora che abbiamo aggiunto tutto il codice per l'effetto di scorrimento parallax, colleghiamo il file styles.css con il file index.html:
|
1 2 3 4 5 6 7 8 9 10 |
... <head> <meta charset="UTF-8" /> <^> <link rel="stylesheet" href="styles.css" /> <^> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Parallax Scrolling Effect with CSS</title> </head> ... |
Apri il file index.html che abbiamo creato nel Passo 2 e nel browser Chrome:
Conclusione
In questo tutorial, abbiamo esaminato i passaggi per configurare una pagina web funzionante utilizzando una configurazione di base. Ci sono molte altre opzioni interessanti e opzioni di personalizzazione con cui puoi sperimentare. Puoi provare ad aggiungere effetti d'ombra, modificare lo scorrimento delle immagini e altre regolazioni per rendere il tuo apprendimento divertente e stimolante.
Per approfondire ulteriormente gli argomenti di sviluppo web, consulta queste risorse dal nostro blog:
- Una guida sull'aggiunta di JavaScript all'HTML
- Lavorare con JavaScript: cosa sono gli oggetti
- Cos'è jQuery e come puoi usarlo
Buona programmazione!
Commenti
Ancora nessun commento. Scrivi il primo.