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. A larghezze inferiori (dispositivi mobili), non si verifica alcun effetto di parallasse, mentre a larghezze maggiori (schermi più grandi), le immagini di sfondo si spostano a metà della velocità di scorrimento, creando l'effetto di parallasse.
Utilizzo
3. All'interno del "corpo", aggiungi ulteriori sezioni o contenuti come desiderato e inseriscili in un ".parallax-container". Includi immagini di sfondo per ogni sezione come `.parallax-layer--image`.
```html
```
Conclusione
Combinando immagini di sfondo fisse, posizionamento e trasformazioni CSS3, hai creato con successo una pagina parallasse a larghezza intera utilizzando Bootstrap. Regola il CSS e il contenuto secondo necessità per personalizzare la tua esperienza di parallasse.
Domanda © www.354353.com