How to create multiple background images with parallax in CSS?

Parallax scrolling is an often used design technique that adds a feeling of movement and depth to web pages. This is done by moving individual page elements at different speeds to simulate the effect of depth on a flat surface. A unique and imaginative way to implement this technique is to utilize multiple background images in CSS. In this article, we’ll explore how to create a parallax effect with multiple background images in CSS, including the steps required to set up the HTML structure and CSS styling. Whether you are a beginner or an experienced front-end developer, this guide will provide you with the knowledge and tools you need to create stunning multiple background image parallax effects.

grammar

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

Background Image Properties

The background-image attribute in CSS is used to specify one or more images as the background of HTML elements. This enables the combination of one or more images as the basis for an element. Images can be positioned in a specific area of ​​an element, can be set to copy horizontally or vertically, or can be resized to cover the entire element or just a portion of it.

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

Animation Properties

The CSS animation property gives the ability to create animations on HTML elements without the help of JavaScript. This property enables you to describe a sequence of keyframes during an element's modification over a given period of time. These keyframes are used to represent the style of an element at different points in time, while animation properties control how an element transitions from one keyframe to another.

The following is a concise explanation of each component of animation properties -

• Name - The animation's nomenclature, used to reference it in @keyframes rules.

• Duration - The duration of the animation, representing the period of time the animation should last, in seconds, represented by a time string value (such as "5s").

• Timing-function − The speed trajectory of the animation can be controlled through linear, ease-in, ease-out, ease-in and ease-out, or a custom cubic-bezier function.

• Delay − The delay before starting the animation, measured in seconds (for example, "2s").

• Iteration-count - The number of iterations the animation should perform, or the term "infinite" means the animation should continue in an infinite loop.

• Direction - The trajectory of the animation, which can be "normal" (in the usual direction), "reverse" (in the opposite direction) or "alternative" alternating forward and backward.

• Fill mode − Specifies the method to satisfy the non-operational state of the animation. Options include "none", "forwards", "backwards" or "both".

• Play-state - Indicates whether the animation is in motion or paused, represented by the values ​​"running" or "paused" respectively.

  李>

method

• To use multiple background images to create a parallax effect in CSS, you should follow a series of instructions −

• Provides a component that contains an environment description. In the current case, the component is a div with the label parallax-container.

• Define the height and width of the container element and set the overflow attribute to hidden. This will ensure that only the visible part of the image is displayed. Additionally, the position property is set to relative to ensure that the background image's position is relative to the container.

• Create separate elements for each background image and set their position to absolute positioning. This allows each image to be positioned precisely within the container element. Each element's height and width are set to 100% so that it fills the entire container.

• Set a background image for each element by using the background-image attribute. Make sure to provide the exact file path for each individual image.

• Create an animation for each element to move the background image along the X-axis. This is done using animation properties in conjunction with the @keyframes rule. The TranslateX property is used to move elements, and the value you set for this property determines how far the element moves horizontally.

• In order to maintain a smooth and continuous animation experience, the animation-timing-function attribute is assigned a linear value, indicating that the animation maintains consistent progress throughout the entire process. In addition, the animation-iteration-count property is configured to an infinite value, indicating that the animation repeats infinitely without a predefined limit on the number of loops.

The translation of

Example

is:

Example

Here is the complete code we will look at in this example -

<!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>

in conclusion

In summary, generating a multi-layered background image parallax effect in CSS is a simple yet powerful technique that can introduce dimension and animation to your website. By following the directions described in these instructions, you can give your audience a visually pleasing and engaging experience that will be remembered for a long time. Whether your design wishes are basic or complex, the flexibility of CSS enables you to customize your design to meet your unique prerequisites. So why not embark on this journey to explore the potential of design and achieve extraordinary results!

The above is the detailed content of How to create multiple background images with parallax in CSS?. For more information, please follow other related articles on the PHP Chinese website!