HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Random</title>
</head>
<body>
<div class="actions">
<a href="#self" class="play">Iniciar</a>
</div>
<div class="wrapper">
<!-- lista de nomes -->
<ul>
<li>Nome 1</li>
<li>Nome 22</li>
<li>Nome 333</li>
<li>Nome 4444</li>
<li>Nome 55555</li>
<li>Nome 66666</li>
<li>Nome 7777</li>
<li>Nome 888</li>
<li>Nome 99</li>
<li>Nome 0</li>
</ul>
</div>
</body>
</html>
SCSS
body {
font-family: sans-serif;
.actions {
text-align: center;
font-size: 10px;
text-transform: uppercase;
}
.wrapper {
height: 60px;
overflow: hidden;
position: fixed;
top: 50%;
width: 400px;
left: 50%;
margin-left: -200px;
border-top: 1px solid #DDD;
border-bottom: 1px solid #DDD;
margin-top: -30px;
//zoom: 2;
&:before,
&:after {
content: '';
display: block;
width: 100%;
box-shadow: 0px 10px 30px 2px rgba(0,0,0,0.5);
position: absolute;
}
&:before {
top: -13px;
}
&:after {
bottom: 9px;
}
ul {
position: absolute;
padding: 0;
top: 0;
width: 100%;
margin: 0 auto;
transition: all .1s ease;
left: 50%;
margin-left: -200px;
margin-right: -200px;
li {
padding: 15px 0;
height: 30px;
line-height: 30px;
transition: all .2s ease-in-out;
font-size: 22px;
list-style: none;
text-align: center;
&.selected {
background-color: red;
height: 30px;
font-size: 30px;
}
}
}
}
}
JAVASCRIPT
var count = 0,
loop = 0,
countNames = $('li').length,
random = 0;
var sort = function() {
/*var line = $('li.selected').length ? $('li.selected') : $('li:first'),
next = line.next();
if (next.length == 0)
next = $('li:first');
var pos = next.offset();*/
if (count >= 0) {
$('ul').css({
top: -(count * 60)
});
}
count++;
// incrementa volta e zera contador
if ( count > 0 && count == countNames) {
loop++;
count = 0;
}
// primeira volta
if (loop >= 1 && loop < 2) {
setTimeout(sort, 20);
}
// segunda volta
else if (loop >= 2 && loop < 3) {
setTimeout(sort, 100);
}
// fim
else if (loop >= 3) {
$('ul').css({
top: -(random * 60)
});
}
// demais voltas
else {
setTimeout(sort, 10);
}
}
$(function() {
$('.play').on('click', function() {
count = 0,
loop = 0,
random = Math.floor(Math.random() * countNames);
sort();
})
});
