Πώς να δημιουργήσετε σελίδα Parallax πλήρους πλάτους με το Bootstrap;

Η δημιουργία μιας σελίδας παράλλαξης πλήρους πλάτους με το Bootstrap περιλαμβάνει τη χρήση εικόνων φόντου, τοποθέτησης και μετασχηματισμών CSS3. Δείτε πώς μπορείτε να το πετύχετε αυτό:

Δομή HTML

1. Δημιουργήστε μια βασική δομή HTML με ενότητα «σώμα» και «κεφαλίδα»:

```html

<κεφάλι>

<σώμα>

```

Στυλ CSS

2. Προσθέστε τα ακόλουθα στυλ στο αρχείο CSS:

```css

/* Κύρια στυλ */

σώμα {

χρώμα φόντου:#000;

}

επικεφαλίδα {

background-image:url("path/to/image1.jpg");

φόντο-συνημμένο:σταθερό;

Μέγεθος φόντου:εξώφυλλο;

background-repeat:no-repeat;

Ύψος:100vh;

}

/* Στυλ παράλλαξης */

.parallax-container {

θέση:σχετική;

Ύψος:100vh;

}

.parallax-layer {

θέση:απόλυτη;

κορυφή:0;

αριστερά:0;

πλάτος:100%;

ύψος:100%;

}

.parallax-layer--image {

φόντο-συνημμένο:σταθερό;

Μέγεθος φόντου:εξώφυλλο;

background-repeat:no-repeat;

}

/* Εφέ παράλλαξης */

@media (μέγιστο πλάτος:992 εικονοστοιχεία) {

.parallax-layer--image {

transform:translate3d(0, 0, 0);

}

}

@μέσα (ελάχ. πλάτος:992 εικονοστοιχεία) {

.parallax-layer--image {

transform:translate3d(-50%, 0, 0);

}

}

```

Επεξήγηση

- Το «σώμα» έχει οριστεί σε μαύρο ως χρώμα φόντου.

- Η "κεφαλίδα" έχει μια σταθερή εικόνα φόντου, καλύπτει ολόκληρο το ύψος της θύρας προβολής και δεν έχει επανάληψη.

- Το ".parallax-container" έχει μια σχετική θέση, επιτρέποντας στα θυγατρικά στοιχεία να τοποθετηθούν απολύτως μέσα σε αυτό.

- Το ".parallax-layer" είναι απόλυτα τοποθετημένο, καλύπτοντας ολόκληρο το δοχείο.

- Το ".parallax-layer--image" έχει εικόνα φόντου, είναι σταθερό, καλύπτει ολόκληρο το επίπεδο και δεν έχει επανάληψη.

- Τα ερωτήματα πολυμέσων εφαρμόζουν εφέ παράλλαξης με βάση το πλάτος της οθόνης. Σε μικρότερα πλάτη (κινητές συσκευές), δεν υπάρχει εφέ παράλλαξης, ενώ σε μεγαλύτερα πλάτη (μεγαλύτερες οθόνες), οι εικόνες φόντου κινούνται με το ήμισυ της ταχύτητας κύλισης, δημιουργώντας το εφέ παράλλαξης.

Χρήση

3. Μέσα στο «σώμα», προσθέστε επιπλέον τμήματα ή περιεχόμενο όπως θέλετε και τυλίξτε τα σε ένα «.parallax-container». Συμπεριλάβετε εικόνες φόντου για κάθε ενότητα ως ".parallax-layer--image".

```html

<σώμα>

```

Συμπέρασμα

Συνδυάζοντας σταθερές εικόνες φόντου, τοποθέτηση θέσης και μετασχηματισμούς CSS3, δημιουργήσατε με επιτυχία μια σελίδα παράλλαξης πλήρους πλάτους χρησιμοποιώντας το Bootstrap. Προσαρμόστε το CSS και το περιεχόμενο όπως απαιτείται για να προσαρμόσετε την εμπειρία σας parallax.