So erstellen Sie eine automatische Scrolling-Liste

Question

Ich versuche, eine automatische Scrolling-Liste mit CSS-Animation zu erstellen.

Was ich jetzt habe:

.players { 
 
    -webkit-transition: opacity 0.5s ease-out; 
 
    -webkit-animation: autoScrolling 5s linear infinite; 
 
    height: 20em; 
 
} 
 
.players .list-group-item { 
 
    height: 5em; 
 
} 
 
@-webkit-keyframes autoScrolling { 
 
    from { 
 
    margin-top: 0; 
 
    } 
 
    to { 
 
    margin-top: -20em; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row"> 
 
    <div class="col-md-6"> 
 
    <ul class="list-group players"> 
 
     <li class="list-group-item">Player 1</li> 
 
     <li class="list-group-item">Player 2</li> 
 
     <li class="list-group-item">Player 3</li> 
 
     <li class="list-group-item">Player 4</li> 
 
    </ul> 
 
    </div> 
 
</div>

Frage ist, ist es möglich, Spieler 1 zeigt unter Wiedergabe 4 zu machen, während es von der Spitze verschwindet? Wie ein End-End-Kreis.

JavaScript-Lösung ist eine Option.

Answer 1

Versuchen Sie, diese Demo.

window.players = function($elem) { 
    var top = parseInt($elem.css("top")); 
    var temp = -1 * $('.players > li').height(); 
    if(top < temp) { 
     top = $('.players').height() 
     $elem.css("top", top); 
    } 
    $elem.animate({ top: (parseInt(top)-60) }, 600, function() { 
     window.players($(this)) 
    }); 
} 
$(document).ready(function() { 
    var i = 0; 
    $(".players > li").each(function() { 
      $(this).css("top", i); 
      i += 60; 
      window.players($(this)); 
    }); 
}); 

Answer 2

Sie können es hilft so etwas wie dieses

$(".list-group-item:first").clone().appendTo($(".list-group")).hide().show('slow'); 
$(".list-group-item:first").hide('slow'); 
setTimeout(function(){ 
    $(".list-group-item:first").remove(); 
},500); 

Hoffnung versuchen!