Techniques CSS
Pour un développeur Web, lorsqu'il s'agit de créer un effet de défilement de parallaxe, différentes techniques sont disponibles. L'une de ces techniques utiliseCascaded Styling Sheets(CSS).
CSS explique comment les éléments HTML sont affichés à l'écran. On peut créer un fichier CSS et il peut être utilisé pour le site Web complet. Il est plus simple d'ajouter un fichier CSS que d'ajouter des styles à chaque élément HTML et de les gérer dans différentes parties de la page Web.
Note- Certaines des méthodes décrites ci-dessous dans ce chapitre sont spécifiques aux ordinateurs de bureau et non aux appareils mobiles. Il sera mentionné dans les étapes lorsqu'une technique particulière ne convient pas aux appareils mobiles.
Compte tenu des décharges CSS dans tous les dessins supplémentaires dans le modèle d'objet de document (DOM), il y a une plus grande utilisation de l'accélération matérielle et un effet fluide sans alourdir le processeur.
Méthode de position absolue
Cette méthode est fréquemment utilisée pour créer un effet de parallaxe, car elle est relativement légère par rapport aux autres options disponibles. La position de l'image d'arrière-plan est maintenue fixe par rapport à d'autres contenus sur l'écran. Dans l'exemple présenté ci-dessous, vous verrez comment le faire en utilisant la magie du CSS.
Dans cette section, nous allons passer par deux méthodes pour la méthode de position absolue -
- Fond unique
- Contexte multiple
Méthode d'arrière-plan unique
Dans cette méthode, nous allons créer deux fichiers dans le même dossier. Observez les étapes ci-dessous dans le même but -
Step 1
Nous devons créer deux fichiers dans le même dossier: le premier fichier avec le balisage HTML et le second avec le code CSS.
Step 2
Maintenant, définissons notre balisage HTML. Observez le code ci-dessous -
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<div class = "BgContainer">
<div class = "Parallax">
<h1> Welcome! </h1>
</div>
<div class = "FgContainer">
<div class = "MainContent">
<p>
Here we will go ahead with some content which will really vary
according to the content on your site. I am just typing out this
content as it is sometimes good to engage user than the usual lorem
ipsum text!
<br/>
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
<br/>
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</body>
</html>Step 3
Ouvrez le bloc-notes. Copiez et collez l'extrait de code ci-dessus.
Lorsque vous enregistrez le fichier, sous Save as type, sélectionnez All Files. Entrez un nom pour votre fichier selon vos besoins, mais il doit être suivi d'une extension -.html comme indiqué dans la capture d'écran ci-dessous.
Step 4
Une fois le fichier enregistré, créez un autre fichier dans le bloc-notes et collez le code ci-dessous -
html, body {
font-size: 18px;
line-height: 28px;
}
h1 {
letter-spacing: -15px;
color: white;
text-align: center;
font-size: 200px;
font-weight: 800;
line-height: 200px;
}
BgContainer {
perspective: 1px;
transform-style: preserve-3d;
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
}
FgContainer {
position: relative;
display: block;
background-color: white;
z-index: 1;
}
MainContent {
max-width: 750px;
margin: 0 auto;
padding: 75px 0;
}
p {
margin: 75px 0;
}
.Parallax {
display: flex;
flex: 1 0 auto;
position: relative;
z-index: -1;
height: 100vh;
justify-content: center;
align-items: center;
transform: translateZ(-1px) scale(2);
background: url(https://cdn.pixabay.com/photo/2017/02/07/09/02/background-2045380_640.jpg);
background-color: rgb(250,228, 216);
}Comme vous l'avez vu à la dernière étape, lorsque vous enregistrez le fichier, sous Save as tapez, sélectionnez All Files. Entrez un nom à votre fichier selon vos besoins et ajoutez une extension.css à lui.
Analyse du code
Comprenons quelle partie du code est responsable de l'effet de parallaxe. Le travail le plus important pour la parallaxe est effectué en utilisant des règles de perspective et de transformation. Faire référence àline 15dans l'extrait de code ci-dessus. La perspective est créée pour notreBgContainerpremière. Cela lance une plate-forme pour la règle de transformation.
dans le Parallax conteneur à partir de la ligne 40, transform La règle à la ligne 48 pousse le div BgContainer en arrière-plan en utilisant translate (-1px).
Vous pouvez modifier les valeurs des paramètres de translation et d'échelle pour modifier la profondeur de la parallaxe.
Lorsque vous ouvrez le fichier html, l'effet de parallaxe sera visible comme indiqué ci-dessous -
Note - Pour le reste du didacticiel, on supposera que le lecteur est capable de créer les fichiers HTML et CSS selon la structure de dossier fournie dans la méthode ci-dessus.
Méthode d'arrière-plan multiple
Dans cette méthode, différentes images apparaîtront au fur et à mesure que l'utilisateur fera défiler la page. Il y a une image avec des crayons, qui est utilisée dans différentes combinaisons de couleurs pour illustrer cet effet.
Observez le code suivant pour la page HTML comme indiqué ci-dessous -
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<h1>Multiple Background Example</h1>
<div class = "parallax">
<div class = "bg__First">First</div>
<div class = "bg__Second">Second</div>
<div class = "bg__Third">Third</div>
<div class = "bg__Fourth">Fourth</div>
</div>
</body>
</html>Similaire à l'exemple précédent, nous utiliserons styles.cssstocké au même emplacement que ce fichier HTML. Nous avons trois div différents nommés Premier, Deuxième, Troisième et Quatrième.
Le code CSS pour le défilement de parallaxe est donné ci-dessous -
body, html {
height : 100%;
font-family : sans-serif;
}
.parallax [class*="bg__"] {
position : relative;
height : 50vh;
text-indent : -9999px;
background-attachment : fixed;
background-position : top center;
background-size : cover;
}
.parallax [class*="bg__"]:nth-child( 2n) {
box-shadow : inset 0 0 1em #111;
}
.parallax .bg__First, .bg__Fourth {
height : 100vh;
}
.parallax .bg__First {
background-image : url("parallax0.png");
}
.parallax .bg__Second {
background-image : url("parallax1.png");
}
.parallax .bg__Third {
background-image : url("parallax2.png");
}
.parallax .bg__Fourth {
background-image : url("parallax1.png");
}Ici, nous créons l'effet de parallaxe à partir de la ligne 7, la propriété importante ici est background-attachment:fixed.
En utilisant cette propriété, la première image avec des crayons de couleur restera toujours en haut. Au fur et à mesure que vous faites défiler vers le bas, différentes images comme décrit à partir de la ligne 28 commenceront à apparaître.
En conséquence, vous pourrez voir l'effet de parallaxe comme indiqué dans le gif ci-dessous. L'image suivante est la capture d'écran de l'exemple que nous avons considéré pour plusieurs arrière-plans.
Parallaxe CSS pur
Combinons les connaissances des deux méthodes précédentes et créons un effet avancé Pure CSS Parallax.
La différence sera la façon dont nous organisons le image élément et le z-transformpropriété. L'explication de la propriété sera fournie après le code CSS.
Créez le fichier HTML avec le code suivant en utilisant la méthode habituelle du Bloc-notes.
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<div class = "wrapParallax">
<div class = "parallax_one">
<img src = "https://cdn.pixabay.com/photo/2018/06/16/15/36/water-lily-3478924_640.jpg" alt = "">
</div>
<div class = "parallax_two">
<h1>Pure CSS Parllax Advanced Level</h1>
</div>
<div class = "parallax_three">
<img src = "https://cdn.pixabay.com/photo/2016/11/29/04/19/beach-1867285_640.jpg" alt = "">
</div>
</div>
</body>
</html>Pour le fichier CSS, le code est donné ci-dessous -
body, html {
padding: 0;
margin: 0;
}
h1 {
color: blue;
text-align: center;
padding: 20px;
text-shadow: 0px 0px 10px #fffff;
}
img {
width:100vw;
height:100vh;
}
.wrapParallax {
perspective: 100px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.parallax_one {
transform: translateZ(-100px) scale(2)
}
.parallax_two {
z-index: 10;
transform: translateZ(-200px) scale(3)
}
.parallax_three {
margin-top: 100vh;
}Analyse du code
Nous avons fixé la position de la première couche dans line 26 en utilisant position:absolutepropriété. Les positions sont également codées en dur à 0.
Dans parallax_two, qui est le calque avec en-tête, nous avons appliqué z-index: 10pour donner un effet flottant au titre. La coucheparallax_three est déplacé vers le bas en fournissant une propriété margin-top.
Ainsi, nous pouvons élever le niveau de complexité de notre effet de parallaxe.
Observez l'effet comme indiqué dans la figure ci-dessous.
