Struttura HTML
1. Crea una struttura HTML di base con una sezione "corpo" e "intestazione":
```html
```
Stili CSS
2. Aggiungi i seguenti stili al tuo file CSS:
```css
/* Stili principali */
corpo {
colore di sfondo:#000;
}
intestazione {
immagine-di-sfondo:url("percorso/dell'immagine1.jpg");
allegato in background:risolto;
dimensione dello sfondo:copertina;
ripetizione in background:nessuna ripetizione;
altezza:100vh;
}
/* Stili di parallasse */
.contenitore-parallasse {
posizione:relativa;
altezza:100vh;
}
.strato di parallasse {
posizione:assoluta;
superiore:0;
a sinistra:0;
larghezza:100%;
altezza:100%;
}
.parallax-layer--immagine {
allegato in background:risolto;
dimensione dello sfondo:copertina;
ripetizione in background:nessuna ripetizione;
}
/* Effetti di parallasse */
@media (larghezza massima:992px) {
.parallax-layer--immagine {
trasformazione:traduci3d(0, 0, 0);
}
}
@media (larghezza minima:992px) {
.parallax-layer--immagine {
trasformazione:traduci3d(-50%, 0, 0);
}
}
```
Spiegazione
- Il "corpo" è impostato su nero come colore di sfondo.
- L'"intestazione" ha un'immagine di sfondo fissa, copre l'intera altezza del viewport e non ha ripetizioni.
- Il `.parallax-container` ha una posizione relativa, consentendo agli elementi figlio di essere posizionati in modo assoluto al suo interno.
- Il `.parallax-layer` è posizionato in modo assoluto, coprendo l'intero contenitore.
- Il file `.parallax-layer--image` ha un'immagine di sfondo, è fisso, copre l'intero livello e non ha ripetizioni.
- Le media query applicano effetti di parallasse in base alla larghezza dello schermo. Con larghezze inferiori (dispositivi mobili) non si verifica alcun effetto di parallasse, mentre con larghezze maggiori (desktop) si verifica un effetto di parallasse con le immagini di sfondo che si muovono lentamente durante lo scorrimento.
Utilizzo
3. All'interno del `body`, aggiungi ulteriori elementi `div` con le classi `.parallax-container` e `.parallax-layer` per creare il tuo contenuto parallasse:
```html
```
Aggiungendo più elementi `.parallax-container` e `.parallax-layer`, puoi creare più sezioni parallasse con immagini diverse.
Nota: Le immagini utilizzate per la parallasse dovrebbero essere ad alta risoluzione e sufficientemente grandi da coprire l'area di visualizzazione senza distorsioni.
Domanda © www.354353.com