Animated raffle
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js"></script>
<button id="go">Pick a winner</button><button id="reset">Reset</button><br>
<div id="names"></div>
CSS
#names {
text-align: center;
width: 100%;
}
.name {
padding: 4px 12px;
font-size: 32px;
display: inline-block;
margin: 10px;
position: relative;
font-weight: bold;
}
JavaScript
var names = {
"Kelsey Gentry": 1,
"Diana Sun": 1,
"Pearl Aldridge": 1,
"Kevin Holt": 1,
"Jenny Wilson": 1,
"Amanda Roos": 1,
};
function reset() {
clearTimeout(tid);
$('#names').empty();
_.each(names, function(count, name) {
for (var i = 0; i < count; i++) {
var nameDiv = $('<div class="name alive"/>').text(name);
if (i == 0) $('#names').append(nameDiv);
else {
var nameDivs = $('#names .name'),
index = ~~(Math.random() * nameDivs.length);
nameDivs.eq(index)[~~(Math.random() * 2) ? 'before' : 'after'](nameDiv);
}
}
});
}
var tid;
function pickWinner() {
clearTimeout(tid);
var num = $('.alive').length,
i = ~~(Math.random() * num--);
$('.alive').eq(i).removeClass('alive').animate({opacity: '0', transform: 'scale(1.5)'});
if (num > 1) tid = setTimeout(arguments.callee, 10000/Math.pow(num, 1.1));
else {
$('.alive').animate({
fontSize: '54px'
}, 2000);
}
}
$('#go').click(pickWinner);
$('#reset').click(reset);
reset();