CODEWITHSUNDEEP
css
Bijan
Bijan

Reputation: 8680

CSS: Scrolling Background

I have been using this site as a template for my page but I am having difficulty changing the background image. I have recreated just the background on this jsFiddle. The current background works because the top has a single color and the sides make it look like the image is continuous.

Here is the relevant CSS Code:

0% {
    -moz-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
100% {
    -moz-transform: translate3d(-2250px, 0, 0);
    -webkit-transform: translate3d(-2250px, 0, 0);
    -o-transform: translate3d(-2250px, 0, 0);
    -ms-transform: translate3d(-2250px, 0, 0);
    transform: translate3d(-2250px, 0, 0);
}

Is there a way to make it so the background scrolls to the right and once it reaches the end, it scrolls back to the left? It is very difficult to make an image look "continuous" when it scrolls.

Upvotes: 0

Views: 100

Answers (1)

Kay
Kay

Reputation: 537

This is actually almost the same functionality as one of my first scripts ever, by leveraging the right CSS property.

.wrapper {
  width: 100%;
  height: 400px;
  text-align: right;
  overflow: hidden;
}
.marquee {
  -webkit-animation: rightLeft 20s linear infinite;
  height: 100%;
  display: block;
  position: relative;
}
@-webkit-keyframes rightLeft {
  0% {
    right: 0;
  }
  50% {
    right: 80%;
  }
  100% {
    right: 0;
  }
}
<div class="wrapper">
  <img class="marquee" src="http://html5up.net/uploads/demos/aerial/css/images/bg.jpg" />
</div>

Upvotes: 2

Related Questions