Бесконечные элементы анимации с jquery и css

Question

Я смотрел на Google, и я не могу найти решение для создания такой анимации. Его необходимо быть бесконечным 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 заставляет все работать дублированием закрепляя исходный набор элементов, поместив дублированный набор элементов вправо от исходного набора элементов, а затем медленно перемещая элементы влево. Когда исходный набор элементов выходит из поля зрения, он помещает их вправо от дублированного набора элементов. Затем он продолжает делать это навсегда.

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(); 

Я уверен, что есть библиотеки, чтобы сделать это для вас, но это, как я хотел бы сделать это без библиотеки.