Le CSS moderne a redéfini le développement web grâce à ses fonctionnalités puissantes et ses capacités extraordinaires. CSS est un outil universel qui offre des options exceptionnelles pour rendre les pages web hautement interactives et attrayantes. Qu'il s'agisse de la flexibilité de conception, de la personnalisation rapide, d'excellentes options de style ou de l'interface utilisateur (UI) avancée — le CSS apporte des solutions de bout en bout pour tous les besoins de développement et de style web. Surtout, en utilisant le CSS et HTML, vous pouvez ajouter des animations et des effets en écrivant seulement quelques lignes de code, ce qui est par ailleurs laborieux avec JavaScript.
Dans ce guide, nous vous guiderons à travers les étapes de création d'un effet de défilement parallaxe avec CSS dans Chrome.
Prérequis
Pour suivre ce tutoriel, vous devez avoir une compréhension de base de HTML et CSS.
Étape 1 : Créer un nouveau projet
Commençons par créer un nouveau dossier de projet et des fichiers à l'aide de l'interface de ligne de commande. Ouvrez votre terminal et tapez la commande suivante pour créer un nouveau dossier de projet :
|
1 |
mkdir css-parallax |
Utilisez la commande cd pour changer de répertoire vers le dossier css-parallax :
|
1 |
cd css-parallax |
Ensuite, créez un fichier HTML dans le dossier css-parallax où nous mettrons tous les codes HTML. Nommez le fichier index.html et ouvrez-le à l'aide de la commande nano :
|
1 |
nano index.html |
Une fois que notre fichier index.html est prêt, passons à la suite et structurons la page web en ajoutant les codes HTML d'introduction.
Étape 2 : Structure du HTML de base
Dans cette étape, nous allons concevoir notre page web en ajoutant les codes HTML. Ajoutez les lignes de code suivantes dans le fichier 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>Effet de défilement parallaxe avec CSS</title> </head> <body></body> </html> |
Après avoir configuré la structure de base de nos pages web, créez trois classes de section – deux pour les images d'arrière-plan et une pour l'arrière-plan uni statique. Ensuite, ajoutez les lignes de code suivantes dans la balise <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>Avant l'effet de défilement parallaxe</h1> </section> <section class="section static"> <h1>Bienvenue au défilement parallaxe</h1> </section> <section class="section parallax bg2"> <h1>Après l'effet de défilement parallaxe</h1> </section> </main> ... </body> |
L'insertion des codes HTML dans la balise <body> complète la configuration de base de notre fichier fichier.html. Dans les étapes suivantes, nous introduirons le CSS et définirons des options de style pour chacun.
Étape 3 : Introduction au CSS
Mettons en forme le site web en ajoutant le fichier CSS et en créant l'effet parallaxe. Tout d'abord, créez un fichier CSS dans le dossier css-parallax dossier dans lequel nous mettrons tous les codes CSS requis pour créer l'effet de défilement parallaxe. Après cela, insérez un styles.css fichier dans votre css-parallax dossier en utilisant la commande nano :
|
1 |
nano styles.css |
Nous allons styliser notre page web en commençant par la classe .wrapper . La classe .wrapper définit la perspective et les propriétés de défilement pour toute la page. Commencez par la classe wrapper et spécifiez sa hauteur, son overflow et sa perspective. Définissez la hauteur du wrapper sur une valeur constante pour que l'effet de défilement parallaxe fonctionne. Dans ce guide, nous avons défini la valeur du viewport en utilisant 100vh pour obtenir la hauteur totale de la fenêtre d'affichage de l'écran. Vous pouvez modifier la valeur vh en fonction des besoins de votre projet. Ensuite, désactivez la barre de défilement horizontale de l'écran en définissant la propriété overflow-x sur hidden. De plus, spécifiez la valeur de la propriété perspective sur 3px. Ajoutons les lignes de code suivantes dans la classe du fichier styles.css :
|
1 2 3 4 5 6 |
.wrapper { height: 100vh; overflow-x: hidden; overflow-y: auto; perspective: 2px; } |
Étape 4 : Ajouter du style pour la classe .section
À la suite de la classe wrapper, ajoutez des styles à la classe .section . La classe .section définit la taille, l'affichage et les propriétés de texte pour les sections principales. Définissez la position sur relative pour aligner un positionnement relatif de l'élément enfant .parallax::after et de l'élément parent .section. Conservez le view-height(vh) sur 100 pour obtenir la hauteur totale de la fenêtre d'affichage de l'écran. Ajoutez, modifiez et stylisez les autres paramètres selon vos besoins.
Dans votre fichier styles.css , ajoutez le code suivant à la suite de la 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; } |
Ensuite, nous allons ajouter un pseudo-élément et le styliser pour créer l'effet parallaxe et le mettre en action.
Étape 5 : Ajouter des styles pour la classe .parallax
Dans cette étape, nous allons ajouter un pseudo-élément sur la classe .parallax. Ce pseudo-élément sera le dernier enfant de l'élément et ajoutera un pseudo-élément ::after à l'image d'arrière-plan responsable du déclenchement de l'effet parallaxe. Dans la première moitié du code, la spécification d'affichage de base et le positionnement du pseudo-élément sont configurés. Dans la moitié suivante, nous ajouterons la propriété transform en utilisant la fonction CSS translateZ() et la maintiendrons à (-1px). De plus, ajoutez un z-index pour contrôler l'empilement vertical.
Ajoutez le code suivant sous 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; } ... |
Étape 6 : Ajouter des images et un arrière-plan pour chaque section
Ajoutons les dernières propriétés CSS dans les images d'arrière-plan et la couleur d'arrière-plan de la section statique. Commencez par ajouter une couleur d'arrière-plan unie à la section .static. Définissez la couleur d'arrière-plan sur aqua et ajoutez le code suivant après 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 .static classe ajoute un arrière-plan à la section statique qui n'a pas d'image. Les deux autres sections avec la .parallax classe possèdent des classes uniques destinées à contenir des images d'arrière-plan. Ajoutez les URL des images d'arrière-plan dans .bg1 et .bg2 classes respectivement.
Dans ce tutoriel, nous utilisons des images aléatoires de Unsplash. Vous pouvez également utiliser des images provenant d'autres sites web comme Pixapay, Placekitten, et Pexels, pour n'en citer que quelques-uns, et les personnaliser comme vous le souhaitez. Ajoutez le code suivant à la .static classe :
|
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'); ... |
Étape 7 : Connecter le CSS au HTML
Maintenant que nous avons ajouté tout le code pour l'effet de défilement parallaxe, lions le fichier styles.css avec le fichier 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>Effet de défilement parallaxe avec CSS</title> </head> ... |
Ouvrez index.html que nous avons créé à l'Étape 2 et dans le navigateur Chrome :
Conclusion
Dans ce tutoriel, nous avons passé en revue les étapes de configuration d'une page web fonctionnelle à l'aide d'une configuration de base. Il existe de nombreuses autres options intéressantes et possibilités de personnalisation avec lesquelles vous pouvez expérimenter. Vous pouvez essayer d'ajouter des effets d'ombre, de modifier le défilement des images et d'autres ajustements pour rendre votre apprentissage amusant et passionnant.
Pour approfondir les sujets liés au développement web, consultez ces ressources de notre blog:
- Guide pour ajouter du JavaScript au HTML
- Travailler avec JavaScript : que sont les objets
- Qu'est-ce que jQuery et comment l'utiliser
Bonne programmation !
Commentaires
Aucun commentaire pour l'instant. Soyez le premier.