Animation d'éléments infinis avec jquery et css

Question

Je regardais google et je ne trouve pas de solution pour faire ce genre d'animation. Son besoin d'être infinie jquery animation gauche comme ceci: https://gyazo.com/aad8dac7852a2ac2cf2be62cb6f8cae3.

Je veux le faire en utilisant css et jquery seulement. Ne pas utiliser de toile.

Une idée de comment le faire?

Answer 1

Vous pouvez essayer quelque chose le long de ces lignes: https://jsfiddle.net/sfemv6qd/9/

Le code HTML est basique comme ceci:

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

Le CSS est de la même base:

#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; 
} 

Le jQuery fait tout fonctionner en double en glaçant l'ensemble original d'éléments, en plaçant l'ensemble dupliqué d'éléments à la droite de l'ensemble d'éléments original, puis en déplaçant lentement les éléments vers la gauche. Lorsque l'ensemble original d'éléments disparaît, il les place à la droite de l'ensemble d'éléments dupliqués. Il continue ensuite à le faire pour toujours.

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

Je suis sûr qu'il ya des bibliothèques pour le faire pour vous, mais voilà comment je ferais sans une bibliothèque.