Πώς να δημιουργήσετε σελίδα 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. Μέσα στο «body», προσθέστε επιπλέον στοιχεία «div» με τις κλάσεις «.parallax-container» και «.parallax-layer» για να δημιουργήσετε το περιεχόμενό σας parallax:

```html

<σώμα>

```

Προσθέτοντας περισσότερα στοιχεία «.parallax-container» και «.parallax-layer», μπορείτε να δημιουργήσετε πολλαπλές ενότητες παράλλαξης με διαφορετικές εικόνες.

Σημείωση: Οι εικόνες που χρησιμοποιούνται για παράλλαξη θα πρέπει να είναι υψηλής ανάλυσης και αρκετά μεγάλες ώστε να καλύπτουν το παράθυρο προβολής χωρίς παραμόρφωση.