Open In App

How to create a sliding background effect using CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

The sliding background effect is not the same as slideshow or carousel. The slideshow or the carousel consists of divided slides that can be stopped according to the user’s wish. The sliding background takes an image and slides it across the x-axis infinitely in a loop to create the effect of a never-ending and continuously moving background.

Approach: In a HTML layout, two elements are needed to implement for the sliding background. One that exactly fits the viewport and the other that runs through it and overflows it. In simple words one for the background and other to act as a containing wrapper for the background.




<div class="wrapper">
  <div class="sliding-background"></div>
</div>


In the next step, the two elements are given relevant positions. By default, the wrapper will be 100% of the browser’s width, and an overflow property is applied that will hide anything that is visually contained outside the wrapper. The wrapper will allow the user to see only the part contained in it. It is set to a width that would surely overflow almost every viewport which means it will overflow the wrapper.




.wrapper {
  overflow: hidden;
}
.sliding-background {
  height: 960px;
  width: 6000px;
}


In the next step, the background image needs to be created with arbitrary height and width. The width is taken as three times greater to fit into a minute longer loop. The canvas will be moving three times in a minute in an infinite loop. Mostly recommended software for creating image is Adobe Photoshop. After creating the image, add it to the sliding-background CSS as follows.




.sliding-background {
  background: url("path to the image") repeat-x;
  height: 500px;
  width: 5076px;
}


Next step includes adding the sliding effect. The background image is expected to move from left to right in a loop that repeats over and creates a seamless effect that the image moves in infinity. The transform is used to position the left image at the left side of the wrapper when the animation begins. By the time the animation is completed, it would have transformed the position negatively (from left to right) by an amount that matches the exact width of our image. This is the reason sliding-background is three times the width of the actual image, the image repeats three times between 0% and 100% before looping again.




@keyframes .slide {
  0%{
    transform: translate3d(0, 0, 0);
  }
  100%{
    transform: translate3d(-1692px, 0, 0);
  }
}


The animation property will instruct the sliding-background class to use the slide animation to run for one minute at a time in a linear infinite loop.




.sliding-background {
  background: url("..path/to/image") repeat-x;
  height: 560px;
  width: 5076px;
  animation: slide 60s linear infinite;
}


Complete code:




<!DOCTYPE html>
<html>
  
<head>
    <title>Sliding Background</title>
    <style>
        .wrapper {
            overflow: hidden;
        }
  
        .sliding-background {
            background: url(
            repeat-x;
            height: 961px;
            width: 6000px;
            animation: slide 60s linear infinite;
        }
  
        @keyframes slide {
            0% {
                transform: translate3d(0, 0, 0);
            }
  
            100% {
                transform: translate3d(-2000px, 0, 0);
            }
        }
    </style>
</head>
  
<body>
    <div class="wrapper">
        <div class="sliding-background"></div>
    </div>
</body>
  
</html>


Output:



Last Updated : 11 Jun, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads