Introduction
Le CSS moderne est un outil puissant que vous pouvez utiliser pour créer de nombreuses fonctionnalités avancées d’interface utilisateur (UI). Dans le passé, ces fonctionnalités reposaient sur des bibliothèques JavaScript.
Dans ce guide, vous allez configurer quelques lignes CSS pour créer un effet de parallaxe de défilement sur une page Web. Vous utiliserez des images de placekitten.com comme images d’arrière-plan d’espace réservé.
Vous aurez une page Web avec un effet de parallaxe de défilement CSS pur une fois le tutoriel terminé.
Avertissement: Cet article utilise des propriétés CSS expérimentales qui ne fonctionnent pas sur tous les navigateurs. Ce projet a été testé et fonctionne sur Chrome.
Cette technique ne fonctionne pas bien dans Firefox, Safari et iOS en raison de certaines optimisations de ces navigateurs.
Étape 1 – Création d’un nouveau projet
Dans cette étape, utilisez la ligne de commande pour configurer un nouveau dossier de projet et des fichiers. Pour commencer, ouvrez votre terminal et créez un nouveau dossier de projet.
Tapez la commande suivante pour créer le dossier de projet:
- mkdir css-parallax
Dans ce cas, vous avez appelé le dossier css-parallax. Maintenant, passez dans le dossier css-parallax:
- cd css-parallax
Ensuite, créez un fichier index.html dans votre dossier css-parallax avec le nano commande:
- nano index.html
Vous allez mettre tout le code HTML du projet dans ce fichier.
Dans l’étape suivante, vous commencerez à créer la structure de la page Web.
Étape 2 – Configuration de la Structure de l’application
Dans cette étape, vous allez ajouter le code HTML nécessaire pour créer la structure du projet.
Dans votre fichier index.html ajoutez le code suivant:
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>CSS Scrolling Parallax</title> </head> <body></body></html>C’est la structure de base de la plupart des pages Web qui utilisent HTML.
Ajoutez le code suivant dans la balise <body> :
<body>... <main> <section class="section parallax bg1"> <h1>Cute Kitten</h1> </section> <section class="section static"> <h1>Boring</h1> </section> <section class="section parallax bg2"> <h1>Fluffy Kitten</h1> </section> </main>...</body>Ce code crée trois sections différentes. Deux auront une image d’arrière-plan, et l’un sera un arrière-plan statique et uni.
Dans les étapes suivantes, vous ajouterez les styles pour chaque section en utilisant les classes que vous avez ajoutées dans le HTML.
Étape 3 – Création d’un fichier CSS et ajout du CSS initial
Dans cette étape, vous allez créer un fichier CSS. Ensuite, vous ajouterez le CSS initial nécessaire pour styliser le site Web et créer l’effet de parallaxe.
Tout d’abord, créez un fichier styles.css dans votre dossier css-parallax avec la commande nano:
- nano styles.css
C’est là que vous mettrez tout le CSS nécessaire pour créer l’effet de défilement de parallaxe.
Ensuite, commencez par la classe .wrapper. Dans votre fichier styles.css ajoutez le code suivant:
.wrapper { height: 100vh; overflow-x: hidden; overflow-y: auto; perspective: 2px;}La classe .wrapper définit les propriétés de perspective et de défilement pour toute la page.
La hauteur de l’enveloppe doit être définie sur une valeur fixe pour que l’effet fonctionne. Vous pouvez utiliser l’unité de fenêtre vh définie sur 100 pour obtenir toute la hauteur de la fenêtre de l’écran.
Lorsque vous mettez à l’échelle les images, elles ajouteront une barre de défilement horizontale à l’écran, vous pouvez donc la désactiver en ajoutant overflow-x: hidden;. La propriété perspective simule la distance entre la fenêtre d’affichage et les pseudo-éléments que vous allez créer et transformer plus bas dans la CSS.
Dans l’étape suivante, vous ajouterez plus de CSS pour styliser votre page Web.
Étape 4 – Ajout de styles pour le.section Class
Dans cette étape, vous ajouterez des styles à la classe .section.
Dans votre fichier styles.css ajoutez le code suivant sous la classe wrapper :
.wrapper { height: 100vh; overflow-x: hidden; perspective: 2px;}.section { position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; color: white; text-shadow: 0 0 5px #000;}La classe .section définit les propriétés de taille, d’affichage et de texte des sections principales.
Définissez une position de relative afin que l’enfant, .parallax::after puisse être positionné de manière absolue par rapport à l’élément parent .section.
Chaque section a un view-height(vh) de 100 pour prendre toute la hauteur de la fenêtre d’affichage. Cette valeur peut être modifiée et définie à la hauteur que vous préférez pour chaque section.
Enfin, les propriétés CSS restantes sont utilisées pour formater et ajouter un style au texte à l’intérieur de chaque section. Il positionne le texte au centre de chaque section et ajoute une couleur de white.
Ensuite, vous ajouterez un pseudo-élément et le styliserez pour créer l’effet de parallaxe sur deux des sections de votre HTML.
Étape 5 – Ajout de styles pour le.classe de parallaxe
Dans cette étape, vous ajouterez les styles à la classe .parallax.
Tout d’abord, vous allez ajouter un pseudo-élément sur la classe .parallax à styler.
Remarque: Vous pouvez consulter les documents Web MDN pour en savoir plus sur les pseudo-éléments CSS.
Ajoutez le code suivant sous la classe .section :
....section { position: relative; height: 100vh; 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; transform: translateZ(-1px) scale(1.5); background-size: 100%; z-index: -1;}...La classe .parallax ajoute un pseudo-élément ::after à l’image d’arrière-plan et fournit les transformations nécessaires à l’effet de parallaxe.
Le pseudo-élément est le dernier enfant de l’élément avec la classe .parallax.
La première moitié du code affiche et positionne l’élément d’alimentation. La propriété transform éloigne le pseudo-élément de la caméra sur le z-index, puis le redimensionne pour remplir la fenêtre d’affichage.
Comme le pseudo-élément est plus éloigné, il semble se déplacer plus lentement.
À l’étape suivante, vous ajouterez les images d’arrière-plan et le style d’arrière-plan statique.
Étape 6 – Ajout des Images et de l’arrière-plan Pour chaque Section
Dans cette étape, vous ajouterez les propriétés finales CSS à ajouter dans les images d’arrière-plan et la couleur d’arrière-plan de la section statique.
Tout d’abord, ajoutez une couleur d’arrière-plan unie à la section .static avec le code suivant après la classe .parallax::after:
....parallax::after { content: " "; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: translateZ(-1px) scale(1.5); background-size: 100%; z-index: -1;}.static { background: red;}...La classe .static ajoute un arrière-plan à la section statique qui n’a pas d’image.
Les deux sections avec la classe .parallax ont également une classe supplémentaire différente pour chacune. Utilisez les classes .bg1 et .bg2 pour ajouter les images d’arrière-plan du chaton.
Ajoutez le code suivant à la classe .static :
....static { background: red;}.bg1::after { background-image: url('https://placekitten.com/g/900/700');}.bg2::after { background-image: url('https://placekitten.com/g/800/600');}...Les classes .bg1, .bg2 ajoutent les images d’arrière-plan respectives pour chaque section.
Les images proviennent du site placekitten. C’est un service pour obtenir des photos de chatons à utiliser comme espaces réservés.
Maintenant que tout le code de l’effet de défilement de parallaxe est ajouté, vous pouvez créer un lien vers votre fichier styles.css dans votre index.html.
Étape 7 – Styles de liaison.css et index d’ouverture.html dans votre navigateur
Dans cette étape, vous lierez votre fichier styles.css et ouvrirez le projet dans votre navigateur pour voir l’effet de défilement de parallaxe.
Tout d’abord, ajoutez le code suivant à la balise <head> dans le fichier index.html :
...<head> <meta charset="UTF-8" /> <^> <link rel="stylesheet" href="styles.css" /> <^> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>CSS Parallax</title></head>...Maintenant, vous pouvez ouvrir votre fichier index.html dans votre navigateur:
Avec cela, vous avez configuré une page Web fonctionnelle avec un effet de défilement. Consultez ce référentiel GitHub pour voir le code complet.
Conclusion
Dans cet article, vous configurez un projet avec un fichier index.html et styles.css et vous avez maintenant une page Web fonctionnelle. Vous avez ajouté dans la structure de votre page Web et créé des styles pour les différentes sections du site.
Il est possible de placer les images que vous utilisez ou l’effet de parallaxe plus loin afin qu’elles se déplacent plus lentement. Vous devrez modifier la quantité de pixels sur les propriétés perspective et les propriétés transform. Si vous ne voulez pas du tout qu’une image d’arrière-plan défile, utilisez background-attachment: fixed; au lieu de perspective/translate/scale.