Geek Answers Handbook

How to create an auto scroll list

I am trying to create an auto-scroll list using CSS animations.

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

Question: is it possible to make Player 1 shown in Play 4 when it disappears from above? Like a circle from end to end.

JavaScript is an option.

+5
source share
2 answers

Try the 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)); }); });
+3
source

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 this helps!

0
source

More articles:


All Articles