javascript - Scrolling tile images with css -
i wish have row of 3 images contain around 10 images per row.
the image dimensions 270x270px , should animate you'd imagine clouds floating right left on screen.
i'd top row of images go right left, middle opposite direction , bottom same top @ different intervals.
i'm not 100% sure on how accomplish , i'm new css animations.
i've tried floating list items inside of browser appears clip ul inside of window , doesn't let float off screen.
the images should loop , continue show flow of images without interruption in animation or placement.
any getting started appreciated.
g
do mean 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 had place elements twice in row looks infinite scroll...
Comments
Post a Comment