CODEWITHSUNDEEP
htmlcssanimation
Tommy B.
Tommy B.

Reputation: 3639

How to make a horitonzal sliding infinite animation using CSS?

I'm trying to make an infinite horizontal slider with 3 rows of images.

It looks like this: enter image description here

But as you see when the end of the rows of images arrive, there's a huge blank space while the image finally appears again.

You can test it live here: http://jsfiddle.net/tbergeron/q596y/6/

Here's the CSS behind it:

ul.lists {
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    -webkit-animation: moveSlideshow 180s linear infinite;
    -moz-animation:    moveSlideshow 180s linear infinite;
}

ul.lists li {
    list-style: none;
    display: inline-block;
}

ul.lists li img {
    display: inline-block;
    width: 100px;
    height: 100px;
}

ul.slider2 {
    top: 140px;
}

ul.slider3 {
    top: 280px;
}

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

What I'd like to happen is to never see that blank space, I would like it to roll on forever. Anyone has an idea on how to achieve this behavior?

Thanks and have a nice day.

Upvotes: 3

Views: 5201

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 105903

basicly , You need to clone your elements.

At least many enough of the first ones to fill the entire width of the screen, or split into two differents tags, your elements.

So once a part of them, is gone left, you move them back to the right end to fill that empty space to keep scrolling without any gaps.

Your case requires javascript.

So many images wrapping line by line needs to clone the whole ul.

A good compromise could be to split content within two ul, so one can to next once of screen.

To duplicate the whole ul in the HTML document might not be a good idea and i would not advise to do so for text.

jQuery DEMO of your fiddle. 

$(".lists.slider1").clone().appendTo("body");
$(".lists.slider2").clone().appendTo("body");
$(".lists.slider3").clone().appendTo("body");

But for small "marquee like" , you can use pseudo elements to clone the first few images.

For text of a known length(em) or known container's width , you may use text-shadow.

Pseudo and text-shadow avoid duplication of content.

Some horrible CSS example that demonstrate the cloning idea: http://dabblet.com/gist/5656795

Upvotes: 1

Related Questions