無限元素動畫與jQuery和css

Question

我在看谷歌，我找不到解決方案，使這種動畫。 它的需要是無限的jquery左邊的動畫是這樣的：https://gyazo.com/aad8dac7852a2ac2cf2be62cb6f8cae3。

我想用css和jquery來做。不使用畫布。

任何想法如何做到這一點？

Answer 1

你可以試試下面幾行內容： https://jsfiddle.net/sfemv6qd/9/

的HTML是基本的，像這樣：

<div id="infinitescrollercontainer"> 
<ul class="infinitescroller"> 
    <li>One</li> 
    <li>Two</li> 
    <li>Three</li> 
    <li>Four</li> 
    <li>Five</li> 
</ul> 

的CSS同樣是基本的：

#infinitescrollercontainer { 
    position:relative; 
    display:block; 
    overflow:hidden; 
    width:300px; 
    height:100px; 
} 

.infinitescroller { 
    display:block; 
    position:absolute; 
    top:0; 
    left:0; 
    list-style:none; 
    padding:0; 
    margin:0; 
} 
.infinitescroller li { 
    display:inline-block; 
    float:left; 
    width:80px; 
    height:100px; 
    background-color:black; 
    color: white; 
    border:2px solid blue; 
    margin-left:10px; 
} 

的jQuery使這一切都由dupl工作將原始元素集合化，將複製的元素集放在原始元素集的右側，然後緩慢地將元素向左移動。當原始元素集移出視線時，它將它們放在重複元素集的右側。然後它會一直這樣做下去。

的jQuery：

// select the scroller, we'll need this often 
var theScroller = $('.infinitescroller'); 
var theScrollSpeed = 5000; 
// calculate the scroller width, we do this by getting 
// the width of one element and then multiplying it by the number of elements 
// (after some experimentation this seemed to work best) 
var theScrollerWidth = theScroller.children('li').first().outerWidth(true) * theScroller.children('li').length; 
theScroller.css('width', theScrollerWidth); 
// now we clone the original scroller so we have 2 to work with 
var theScrollerDupe = theScroller.clone(); 
// adjust the left position to put it after the first scroller 
theScrollerDupe.css('left',theScrollerWidth); 
theScroller.after(theScrollerDupe); // insert it into the DOM 

// do the scrolling with a nice function 
var doTheScrolling = function() { 
    theScroller.animate({ 
    left: theScroller.position().left - theScrollerWidth 
    }, theScrollSpeed, 'linear'); 
    theScrollerDupe.animate({ 
    left: theScrollerDupe.position().left - theScrollerWidth 
    }, theScrollSpeed, 'linear', function() { 
    appendScrollers(); // move the scrollers 
    }); 
}; 

// whichever scroller is off to the left of the screen now needs to 
// appear after the scroller we can see.. 
var appendScrollers = function() { 
    // find out which scroller we should move by seeing which one is further to the left 
    if(theScrollerDupe.position().left < theScroller.position().left) { 
    theScrollerDupe.css('left',theScrollerWidth + 'px'); 
    } else { 
    theScroller.css('left',theScrollerWidth + 'px'); 
    } 
    doTheScrolling(); 
} 

// do some scrolling.. 
doTheScrolling(); 

我敢肯定有庫爲你做這個，但是這是我會做沒有一個圖書館。