I'm trying to build a auto scrolling list using CSS animation.

What I got now:

.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=".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>

I'm trying to build a auto scrolling list using CSS animation.

What I got now:

.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./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>

Question is, is it possible to make Player 1 showing under Play 4 while it disappears from the top? Like an end to end circle.

JavaScript solution is an option.

• javascript
• css

• Could you check the pos of player 4 dom element and if it is at a certain top pos duplicate the player 1 dom element and append it below player 4? – Wesley Skeen Commented Jun 5, 2015 at 10:53
• Thanks, I'm trying to avoid doing that bcz the list was generated by angular. Changing the dom might lead to something I don't want.. – lastr2d2 Commented Jun 5, 2015 at 11:15

2 Answers 2

Try this 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));
    });
});

You can try something like this

$(".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);

Hope it helps !