CODEWITHSUNDEEP
javascripthtmlcss
notrab
notrab

Reputation: 234

Scrolling tile images with css

I wish to have a row of 3 images which will contain around 10 images per row.

The image dimensions are 270x270px and should animate like you'd imagine clouds floating from right to left on the screen.

I'd like the top row of images to go right to left, the middle the opposite direction and the bottom the same as the top but at different intervals.

I'm not 100% sure on how to accomplish this and I'm new to CSS animations.

I've tried floating list items inside of a but the browser appears to clip the ul inside of the window and doesn't let it float off the screen.

see image for details

The images should loop and continue to show a flow of images without any interruption in animation or placement.

Any help getting started would be much appreciated.

G

Upvotes: 2

Views: 1889

Answers (3)

huysentruitw
huysentruitw

Reputation: 28111

Do you mean something like this jsFiddle ?

HTML

<div class="container">
    <div class="rowContainer">
        <div class="row rtl">
            <div class="cell">1</div>
            <div class="cell">2</div>
            <div class="cell">3</div>
            <div class="cell">4</div>
            <div class="cell">5</div>
            <div class="cell">6</div>
            <div class="cell">7</div>
            <div class="cell">8</div>
            <div class="cell">9</div>
            <div class="cell">10</div>
            <div class="cell">1</div>
            <div class="cell">2</div>
            <div class="cell">3</div>
            <div class="cell">4</div>
            <div class="cell">5</div>
            <div class="cell">6</div>
            <div class="cell">7</div>
            <div class="cell">8</div>
            <div class="cell">9</div>
            <div class="cell">10</div>    
        </div>
    </div>
    <div class="rowContainer">
        <div class="row ltr">
            <div class="cell">1</div>
            <div class="cell">2</div>
            <div class="cell">3</div>
            <div class="cell">4</div>
            <div class="cell">5</div>
            <div class="cell">6</div>
            <div class="cell">7</div>
            <div class="cell">8</div>
            <div class="cell">9</div>
            <div class="cell">10</div>
            <div class="cell">1</div>
            <div class="cell">2</div>
            <div class="cell">3</div>
            <div class="cell">4</div>
            <div class="cell">5</div>
            <div class="cell">6</div>
            <div class="cell">7</div>
            <div class="cell">8</div>
            <div class="cell">9</div>
            <div class="cell">10</div>    
        </div>
    </div>
    <div class="rowContainer">
        <div class="row rtl">
            <div class="cell">1</div>
            <div class="cell">2</div>
            <div class="cell">3</div>
            <div class="cell">4</div>
            <div class="cell">5</div>
            <div class="cell">6</div>
            <div class="cell">7</div>
            <div class="cell">8</div>
            <div class="cell">9</div>
            <div class="cell">10</div>
            <div class="cell">1</div>
            <div class="cell">2</div>
            <div class="cell">3</div>
            <div class="cell">4</div>
            <div class="cell">5</div>
            <div class="cell">6</div>
            <div class="cell">7</div>
            <div class="cell">8</div>
            <div class="cell">9</div>
            <div class="cell">10</div>    
        </div>
    </div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
@-webkit-keyframes scrollRtL {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-50%, 0); }
}
@keyframes scrollRtL {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-50%, 0); }
}
@-webkit-keyframes scrollLtR {
    0% { transform: translate(-50%, 0); }
    100% { transform: translate(0, 0); }
}
@keyframes scrollLtR {
    0% { transform: translate(-50%, 0); }
    100% { transform: translate(0, 0); }
}
html, body, .container {
    overflow: hidden;
    width: 100%;
    height: 100%;
}
.rtl {
    -webkit-animation: scrollRtL 5s linear infinite;
    animation: scrollRtL 5s linear infinite;
}
.ltr {
    -webkit-animation: scrollLtR 5s linear infinite;
    animation: scrollLtR 5s linear infinite;
}
.rowContainer {
    position: relative;
    height: 280px;
}
.row {
    position: absolute;
    white-space: nowrap;
    font-size: 0;
}
.cell {
    font-family: verdana;
    display: inline-block;
    font-size: 36px;
    width: 270px;
    height: 270px;
    background-color: red;
    color: white;
    margin: 5px;
}

Only problem is that I had to place all elements twice in a row so it looks like an infinite scroll...

Upvotes: 5

liuzdcq
liuzdcq

Reputation: 71

  1. First you need a wrap div, which its width is three times of your image, so that it can display 3 of your images at a time.
  2. Set the wrap div style: position:relative; overflow:hidden;
  3. Create row div, 10 images in that div, and use 'position:abolute;left:0;' , then you can use css3 transform to move it.

Upvotes: 1

Refilon
Refilon

Reputation: 3489

Do you mean something like this?

<marquee behavior="scroll" direction="left" scrollamount="10"><img src="http://www.html.am/images/html-codes/marquees/fish-swimming.gif" width="94" height="88" alt="Swimming fish" /></marquee>

http://jsfiddle.net/mLbkcwmf/

Upvotes: 0

Related Questions