Comment créer plusieurs images d'arrière-plan avec parallaxe en CSS ?

Le défilement parallaxe est une technique de conception souvent utilisée qui ajoute une sensation de mouvement et de profondeur aux pages Web. Cela se fait en déplaçant des éléments de page individuels à différentes vitesses pour simuler l'effet de profondeur sur une surface plane. Une manière unique et imaginative de mettre en œuvre cette technique consiste à utiliser plusieurs images d’arrière-plan en CSS. Dans cet article, nous explorerons comment créer un effet de parallaxe avec plusieurs images d'arrière-plan en CSS, y compris les étapes requises pour configurer la structure HTML et le style CSS. Que vous soyez un développeur front-end débutant ou expérimenté, ce guide vous fournira les connaissances et les outils dont vous avez besoin pour créer de superbes effets de parallaxe sur plusieurs images d'arrière-plan.

Grammaire

element {
   background-image: url(image-location.jpg);
}

Propriétés de l'image d'arrière-plan

L'attribut background-image en CSS est utilisé pour spécifier une ou plusieurs images comme arrière-plan des éléments HTML. Cela permet la combinaison d’une ou plusieurs images comme base d’un élément. Les images peuvent être positionnées dans une zone spécifique d'un élément, peuvent être configurées pour être copiées horizontalement ou verticalement, ou peuvent être redimensionnées pour couvrir l'intégralité de l'élément ou seulement une partie de celui-ci.

element {
   animation: name duration timing-function delay iteration-count direction fill-mode play-state;
}

Propriétés de l'animation

La propriété CSS animation donne la possibilité de créer des animations sur des éléments HTML sans l'aide de JavaScript. Cette propriété permet de décrire une séquence d'images clés lors de la modification d'un élément sur une période de temps donnée. Ces images clés sont utilisées pour représenter le style d'un élément à différents moments, tandis que les propriétés d'animation contrôlent la manière dont un élément passe d'une image clé à une autre.

Voici une explication concise de chaque composant des propriétés de l'animation -

• name - La nomenclature de l'animation, utilisée pour la référencer dans les règles @keyframes.

• Durée - La durée de l'animation, représentant la période pendant laquelle l'animation doit durer, en secondes, exprimée à l'aide d'une valeur de chaîne de temps (par exemple "5 s").

• Fonction de synchronisation - La trajectoire de vitesse de l'animation peut être contrôlée via une fonction linéaire, d'entrée et de sortie faciles, d'entrée et de sortie faciles ou une fonction de bézier cubique personnalisée.

• Delay − Le délai avant le démarrage de l'animation, mesuré en secondes (par exemple, "2s").

• Iteration-count - Le nombre d'itérations que l'animation doit effectuer, ou le terme "infini" signifie que l'animation doit continuer à boucler à l'infini.

• Direction - La trajectoire de l'animation, qui peut être "normale" (dans le sens habituel), "inverse" (dans le sens opposé) ou "alternative" en alternant avant et arrière.

• Fill Mode - Spécifie une méthode pour satisfaire l'état non opérationnel de l'animation. Les options incluent "aucun", "en avant", "en arrière" ou "les deux".

• Play-state - Indique si l'animation est en mouvement ou en pause, représentée par les valeurs "running" ou "paused" respectivement.

  李>

Méthode

• Pour utiliser plusieurs images d'arrière-plan pour créer un effet de parallaxe en CSS, vous devez suivre une série d'instructions −

• Fournit un composant qui contient des représentations de l'environnement. Dans le cas présent, le composant est un div avec le label parallax-container.

• Définissez la hauteur et la largeur de l'élément conteneur et définissez la propriété de débordement sur cachée. Cela garantira que seule la partie visible de l’image est affichée. De plus, la propriété position est définie sur relative pour garantir que la position de l'image d'arrière-plan est relative au conteneur.

• Créez des éléments séparés pour chaque image d'arrière-plan et définissez leur position sur un positionnement absolu. Cela permet à chaque image d'être positionnée précisément dans l'élément conteneur. La hauteur et la largeur de chaque élément sont définies à 100 % afin qu'il remplisse tout le conteneur.

• Définissez une image d'arrière-plan pour chaque élément en utilisant l'attribut background-image. Assurez-vous de fournir le chemin de fichier exact pour chaque image individuelle.

• Créez une animation pour chaque élément afin de déplacer l'image d'arrière-plan le long de l'axe X. Cela se fait en utilisant les propriétés d'animation en conjonction avec la règle @keyframes. La propriété TranslateX est utilisée pour déplacer des éléments et la valeur que vous définissez pour cette propriété détermine la distance dans laquelle l'élément se déplace horizontalement.

• Afin de maintenir une expérience d'animation fluide et continue, l'attribut animation-timing-function se voit attribuer une valeur linéaire, indiquant que l'animation maintient une progression constante tout au long du processus. De plus, l'attribut animation-iteration-count est configuré sur une valeur infinie, indiquant que l'animation se répète à l'infini sans limite prédéfinie sur le nombre de boucles.

Exemple

Exemple

Voici le code complet que nous examinerons dans cet exemple -

<!DOCTYPE html>
<html>
<head>
   <title>How to create multiple background image parallax in CSS?</title>
   <style>
      .parallax-container {
         height: 200px;
         width: 100%;
         overflow: hidden;
         position: relative;
      }
      .layer-1,
      .layer-2,
      .layer-3 {
         background-position: center;
         background-size: cover;
         position: absolute;
         height: 200px;
         width: 100%;
      }
      .layer-1 {
         background-image: linear-gradient(red,orange);
         animation: move-layer-1 15s linear infinite;
      }
      .layer-2 {
         background-image: linear-gradient(blue,lightblue);
         animation: move-layer-2 20s linear infinite;
      }
      .layer-3 {
         background-image: linear-gradient(green,lightgreen);
         animation: move-layer-3 25s linear infinite;
      }
      @keyframes move-layer-1 {
         0% {
            transform: translateX(0);
         }
         100% {
            transform: translateX(-30%);
         }
      }
      @keyframes move-layer-2 {
         0% {
            transform: translateX(0);
         }
         100% {
            transform: translateX(-60%);
         }
      }
      @keyframes move-layer-3 {
         0% {
            transform: translateX(0);
         }
         100% {
            transform: translateX(-90%);
         }
      }
   </style>
</head>
<body>
   <h4>How to create multiple background image parallax in CSS?</h4>
   <div class="parallax-container">
      <div class="layer-1"></div>
      <div class="layer-2"></div>
      <div class="layer-3"></div>
   </div>
</body>
</html>

Conclusion

En résumé, générer un effet de parallaxe d'image d'arrière-plan multicouche en CSS est une technique simple mais puissante pour introduire de la dimension et de l'animation à votre site Web. En suivant les instructions décrites dans ces instructions, vous pouvez offrir à votre public une expérience visuellement agréable et engageante dont on se souviendra longtemps. Que vos souhaits de conception soient basiques ou complexes, la flexibilité du CSS vous permet d'adapter votre conception pour répondre à vos exigences uniques. Alors pourquoi ne pas vous lancer dans ce voyage pour explorer le potentiel du design et obtenir des résultats extraordinaires !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!