La technologie CSS moderne constitue un outil puissant que vous pouvez utiliser pour créer de nombreuses fonctionnalités d’interface utilisateur (UI) avancées. Auparavant, ces caractéristiques reposaient sur des bibliothèques JavaScript.
Au cours de ce guide, vous allez configurer quelques lignes de CSS pour créer un effet scrolling parallax sur une page Web. Vous utiliserez des images de placekitten.com
comme images de balise d’arrière-plan.
Une fois que vous aurez fini ce tutoriel, vous aurez une page Web avec un effet parallaxe avec défilement en pure CSS.
Avertissement : les propriétés expérimentales de CSS utilisées dans cet article ne fonctionnent pas sur tous les navigateurs. Ce projet a été testé et fonctionne sur Chrome. Cette technique ne fonctionne pas correctement avec Firefox, Safari et iOS, en raison de certaines optimisations de ces navigateurs.
Pour cette étape, utilisez la ligne de commande afin de configurer un nouveau dossier de projet et des fichiers. Pour commencer, ouvrez votre terminal et créez un nouveau dossier de projet.
Saisissez la commande suivante pour créer le dossier de projet :
- mkdir css-parallax
Pour cet exercice, appelez 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 la commande nano
suivante :
- nano index.html
Placez l’intégralité du HTML du projet dans ce fichier.
Au cours de la prochaine étape, vous allez commencer à créer la structure de la page Web.
Au cours de cette étape, vous allez ajouter le HTML dont vous avez besoin pour créer la structure du projet.
Ajoutez le code suivant dans votre fichier index.html
:
<!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>
Il s’agit de la structure de base de 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 en arrière-plan et l’autre aura un arrière-plan statique.
Au cours des étapes suivantes, vous allez ajouter les styles de chaque section en utilisant les catégories que vous avez ajoutées dans le HTML
.
Au cours de cette étape, vous allez créer un fichier CSS
. Ensuite, vous allez ajouter le CSS initial dont vous avez besoin pour formater le site Web et créer l’effet de parallaxe.
Tout d’abors, créez un fichier styles.css
dans votre dossier css-parallax
avec la commande nano
suivante :
- nano styles.css
C’est là que vous allez mettre tout le CSS dont vous avez besoin pour créer l’effet parallaxe avec défilement.
Ensuite, commencez par la catégorie .wrapper
. Ajoutez le code suivant dans votre fichier styles.css
:
.wrapper {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 2px;
}
La catégorie .wrapper
configure les propriétés de perspective et de défilement sur toute la page.
Pour que l’effet fonctionne, la hauteur de l’habillage doit être configurée sur une valeur fixe. Vous pouvez utiliser l’unité de visualisation vh
configurée sur 100
pour obtenir la pleine hauteur de visualisation à l’écran.
Lorsque vous dimensionnez les images, une barre de défilement horizontale apparaîtra à l’écran. Donc, vous pouvez la désactiver en ajoutant overflow-x: hidden;
. La propriété perspective
simule la distance de l’unité de visualisation aux pseudo-éléments que vous allez créer et continuer à transformer dans le CSS
.
Au cours de l’étape suivante, vous allez ajouter plus de CSS pour formater votre page Web.
.section
Au cours de cette étape, vous allez ajouter des styles à la catégorie .section
.
À l’intérieur de votre fichier styles.css
, ajoutez le code suivant en dessous de la catégorie de l’habillage :
.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 catégorie .section
définit les propriétés de taille, d’affichage et de texte des principales sections.
Configurez la position sur relative
pour que l’enfant .parallax::after
puisse être exactement positionné par rapport à l’élément parent .section
.
Chaque section dispose d’une view-height(vh)
de 100
pour prendre en charge la pleine hauteur de l’unité de visualisation. Vous pouvez modifier et configurer cette valeur comme bon vous semble pour chaque section.
Enfin, les autres propriétés de CSS
permettent de formater et d’ajouter un style au texte dans chaque section. Elles vous permettent de positionner le texte au centre de chaque section et d’ajouter une couleur : white
.
Ensuite, vous allez ajouter un pseudo-élément et le formater pour créer l’effet parallaxe sur deux des sections de votre HTML
.
.parallax
Au cours de cette étape, vous allez ajouter des styles à la catégorie .parallax
.
Tout d’abord, vous allez ajouter un pseudo-élément dans la catégorie .parallax
à formater.
Remarque : vous pouvez consulter les docs web de MDN pour en savoir plus sur les pseudo-éléments de CSS.
Ajoutez le code suivant sous la catégorie .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 catégorie .parallax
ajoute un pseudo-élément ::after
à l’image d’arrière-plan et procède aux transformations nécessaires pour l’effet parallaxe.
Le pseudo-élément est le dernier enfant de l’élément ayant la catégorie .parallax
.
La première moitié du code affiche et positionne le pseudo-élément. La propriété transform
écarte le pseudo-élément de la caméra sur z-index
, puis elle le rééchelonne pour remplir l’unité de visualisation.
Comme le pseudo-élément se trouve plus loin, il semble se déplacer plus lentement.
Au cours de la prochaine étape, vous allez ajouter les images de l’arrière plan et le style de l’arrière-plan statique.
Au cours de cette étape, vous allez ajouter les dernières propriétés de CSS
pour intégrer les images d’arrière-plan et la couleur de fond de la section statique.
Tout d’abord, ajoutez une couleur de fond unie à la section .static
en utilisant le code suivant après la catégorie .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 catégorie .static
ajoute un arrière-plan à la section statique qui n’a pas d’image.
Les deux sections portant la catégorie .parallax
disposent également d’une catégorie supplémentaire qui est différente pour chacune d’elles. Utilisez les classes .bg1
et .bg2
pour ajouter les images d’arrière-plan de chatons.
Ajoutez le code suivant à la catégorie .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 catégories .bg1, .bg2
ajoutent les images d’arrière-plan correspondant à chaque section.
Les images proviennent du site web placekitten. Il s’agit d’un service qui met à disposition des photos de chatons que vous pouvez utiliser en tant que supports de présentation.
Maintenant que tout le code de l’effet parallaxe avec défilement est ajouté, vous pouvez le lier à votre fichier styles.css
dans votre index.html
.
styles.css
et ouverture de index.html
dans votre navigateurAu cours de cette étape, vous allez lier votre fichier styles.css
et ouvrir le projet dans votre navigateur pour voir l’effet parallaxe avec défilement.
Tout d’abord, ajoutez le code suivant à la balise <head>
dans le fichier index.html
:
[label css-parallax/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 :
C’est fait, vous avez configuré une page web avec un effet de défilement qui fonctionne. Consultez ce référentiel GitHub pour voir le code complet.
Grâce à cet article, vous avez configuré un projet avec un fichier index.html
et styles.css
et vous disposez maintenant d’une page Web fonctionnelle. Vous y avez ajouté la structure de votre page Web et créé les styles des diverses sections du site.
Vous pouvez éloigner les images ou l’effet parallaxe que vous utilisez pour qu’ils se déplacent plus lentement. Il vous faudra modifier la quantité de pixels sur perspective
et les propriétés transform
. Si vous ne souhaitez pas que l’image d’arrière-plan défile, utilisez background-attachment: fixed;
au lieu de perspective/translate/scale
.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.