How To Create A CSS Sliding Background

The CSS sliding background effect isn’t that new. In fact, it’s couple of years old.When I found it on some websites then I thought that it would be nice to share this effect.

Keep in mind, that this effect is different from other CSS carousels and sliders where the content is divided into separate slides which can be stopped & played.

With this technique you can slide one element’s background on its X-axis in an infinite loop to create an illusion of never ending and always moving background.

Lets setup the html

This will provide you the blueprint of  HTML structure.

css sliding background

We have 2 elements here one that shows the sliding background and the other that contains the sliding/overflowing background itself. That means that we only need to create 2 containers in HTML markup one for the background, and another to act as a containing wrapper for the background.

HTML:

<div class="wrapper">

<div class="sliding-background">

</div>

</div>

 Now positioning of elements

Let’s add some CSS to position our two elements correctly.

CSS:

.wrapper {
   overflow: hidden;
 }
.sliding-background {
   height: 500px;
   width: 5076px;
 }

The default width of .wrapper is 100% of browser width (that’s block-level element’s behavior), and overflow:hidden; property will hide anything that is flowing outside the defined container. It’s basically like a crop on a photograph. There’s probably be extra content flowing outside the wrapper, but the wrapper is hiding it.

That’s the main logic behind the.sliding-background effect.The background’s width is considerably higher so that it would overflow most viewports. And that’s exactly what we want: as it should be something that would overflow the wrapper to get the desired effect. In this case, I chose a width of 5076px.

Let’s create the background image

Now we need an image to scroll it across the screen. So, let’s get to it.

The width of 5076px that I chose above can be equally divided into 3 parts which is perfectly suitable for a minute long loop (that will come later).Now our background is going to be repeated for the 3 times as we get 1692px for each background on dividing 5076px by 3. So,the backgrounds will repeat in a minute loop.

I chose 500px for height. However, it can be whatever you want depending upon your requirement and it will be the height of canvas for  background image.

Here’s the photoshop psd for better understanding.

The above image is going to used as our background image in the CSS.

CSS:

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

Now we have a very large image that overflows the wrapper and can now be used to scroll across the screen in an infinite loop.

Now the sliding effect

All right, let’s move the image. We want it to go from left to right in an infinite loop  to create a seamless effect that the image is going on forever.

Defining the CSS animation:

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

We’re have used the transform property to position the image at the left edge of the wrapper when the animation starts like this.

sliding background

At the time the animation completes,Our image’s position will have transformed negatively (from left to right) by the sames amount as the width of our image. As the .sliding-background is three times the width of the actual image, the image repeats three times between 0% and 100% before looping again.

Note: We’re using an additional <div>  rather than animating background-position on the main <div>, because we want to use animated transform to do the movement, which is a lot better performing.

Now, finalize things out by calling our slide animation on the .sliding-background class:

Let’s put everything together

HTML:

<div class="wrapper">

<div class="sliding-background">

</div>

</div>

 CSS:

.wrapper {
   overflow: hidden;
}

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

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

Check the DEMO here.

I hope you liked my solution and if you have any other solution or suggestion feel free to share it.

Please follow and like us:



Leave a Comment

Your email address will not be published. Required fields are marked *