CODEWITHSUNDEEP
csscss-transitions
sameer manek
sameer manek

Reputation: 763

CSS: scrolling slideshow not repeating

I have a long image that I want to slide on the screen with a scrolling effect, like on the apple tv's webpage (the floating/scrolling movie covers):

this is the markup i use:

<div class="header">
        <div class="slider">

        </div>
    </div>

and this is the css:

    .header{
    height: 610px;
    width: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
}

.header .slider{
    height: 540px;
    background: url("../images/header.jpg");
    position: relative;
    border-left: 10px rgb(34,34,34) solid;
    border-bottom: 10px rgb(34,34,34) solid;
    border-right: 10px rgb(34,34,34) solid;
    left: 0;
    top: 60px;
    width: 450%;
    animation: moveSlideshow 40s linear infinite;
    -webkit-animation: moveSlideshow 40s linear infinite;
    -moz-animation: moveSlideshow 40s linear infinite;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);

}

here is the css animation:

@keyframes moveSlideshow {
100% {
    -webkit-transform: translateX(-300%);
}

}

it occurs that the slideshow is scrolling but for only once and it soon scrolls out of the screen after the entire image is scrolled(and also with some part of the beginning!)..

the image is: dimensions: 5526*540

please help

Upvotes: 0

Views: 711

Answers (2)

NeilWkz
NeilWkz

Reputation: 245

I'm not familiar with the apple tv effect you're referencing, but if you want it to loop over and over you need to add an additional keyframe @ 0% with translateX(0); and then use the width of the image in your @ 100% translateX();

So if you have a 2000px image your animation would look like :

@keyframes moveSlideshow {
  0% {
      transform: translateX(0);
  }
  100% {
    transform: translateX(-2000px);
  }
}

Here's a pen: http://codepen.io/NeilWkz/pen/wWMzwe (!NOTE: I turned on auto-prefixer as you code was busted in everything but chrome !)

Upvotes: 0

Tomasz Nowak
Tomasz Nowak

Reputation: 186

Do You mean something like this?

@keyframes slide-banner {
  0%   {background-position: 0 0;}
  100% {background-position: -300px 0;}
}
@-webkit-keyframes slide-banner {
  0%   {background-position: 0 0;}
  100% {background-position: -300px 0;}
}
@-o-keyframes slide-banner {
  0%   {background-position: 0 0;}
  100% {background-position: -300px 0;}
}
@-moz-keyframes slide-banner {
  0%   {background-position: 0 0;}
  100% {background-position: -300px 0;}
}
.slide-banner {display: block; width:100%; height:100px; animation: slide-banner 2s infinite linear; -webkit-animation: slide-banner 2s infinite linear; -ms-animation: slide-banner 2s infinite linear; -moz-animation: slide-banner 2s infinite linear; -o-animation: slide-banner 2s infinite linear;}
<div class="slide-banner" style="background-image: url(http://www.javatpoint.com/images/javascript/javascript_logo.png);background-repeat: repeat;"></div>

Upvotes: 1

Related Questions