Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Hit the Bits! - CSS3 Leaderboard - With Multiple Lists
<html>
<head><title>Animating a List with CSS3 Transitions - Multiple Lists</title></head>
<body>
<!-- Demonstrates one way to animate multiple lists -->
<style type="text/css">
.leaderboard li {
font-family: sans-serif;
font-size: 12px;
line-height: 12px;
}
.leaderboard .players li {
display:block;
clear: both;
position: absolute;
width: 350px;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
-ms-transition-duration: 1s;
}
.leaderboard .players li.header {
font-weight: bold;
background-color: silver;
background: -moz-linear-gradient(top, #cedce7 0%, #596a72 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cedce7), color-stop(100%,#596a72));
}
.leaderboard .players {
padding: 0;
width: 350px;
position: relative;
border: 1px solid #333;
box-shadow: 2px 2px 5px gray;
height: 132px;
background: -moz-linear-gradient(top, #cedce7 0%, #596a72 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cedce7), color-stop(100%,#596a72));
}
.leaderboard .players div {
display: block;
float: left;
overflow: hidden;
padding: 5px;
}
.leaderboard .player {
background: -moz-linear-gradient(top, #feffff 0%, #e0dace 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feffff), color-stop(100%,#e0dace));
}
.leaderboard .rank {
width: 50px;
}
.leaderboard .name {
width: 150px;
}
.leaderboard .score {
width: 100px;
}
</style>
<div id="board1">
<div class="leaderboard">
<ul class="players">
<li class="header">
<div class="rank">Rank</div>
<div class="name">Player</div>
<div class="score">Score</div>
</li>
</ul>
</div>
</div>
<div id="board2">
<div class="leaderboard">
<ul class="players">
<li class="header">
<div class="rank">Rank</div>
<div class="name">Player</div>
<div class="score">Score</div>
</li>
</ul>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script language="javascript">
var Leaderboard = function($board) {
var self = this;
var players;
var timerId;
var scoreToWin = 2000;
var updateInterval = 2000;
this.descending = function(a, b) { return a.score < b.score ? 1 : -1; }
this.reposition = function() {
var height = $board.find(".leaderboard .header").height();
var y = height;
for(var i = 0; i < players.length; i++) {
players[i].$item.css("top", y + "px");
y += height;
}
}
this.updateBoard = function() {
var player = self.getRandomPlayer();
player.score += self.getRandomScoreIncrease();
player.$item.find(".score").text(player.score);
players.sort(self.descending);
self.updateRanks(players);
self.reposition();
if(self.isGameOver(player.score)) {
self.resetBoard();
}
}
this.isGameOver = function(score) {
return score >= scoreToWin;
}
this.getRandomPlayer = function() {
var index = this.getRandomBetween(0, players.length);
return players[index];
}
this.getRandomScoreIncrease = function() {
return this.getRandomBetween(50, 150);
}
this.getRandomBetween = function(minimum, maximum) {
return Math.floor(Math.random() * maximum) + minimum;
}
this.updateRanks = function(players) {
for(var i = 0; i < players.length; i++) {
players[i].$item.find(".rank").text(i + 1);
}
}
this.resetBoard = function() {
var $lists = $board.find(".players");
$lists.find("li.player").remove();
if(timerId !== undefined) {
clearInterval(timerId);
}
players = [
{ name: "D35truXion", score: 500 },
{ name: "Lithos", score: 400 },
{ name: "baby.bumpkins", score: 300 },
{ name: "SpreadsheetMan", score: 200 },
{ name: "Eitz", score: 100 }
];
for(var i = 0; i < players.length; i++) {
var $item = $(
"<li class='player'>" +
"<div class='rank'>" + (i + 1) + "</div>" +
"<div class='name'>" + players[i].name + "</div>" +
"<div class='score'>" + players[i].score + "</div>" +
"</li>");
players[i].$item = $item;
$lists.append($item);
}
timerId = setInterval(this.updateBoard, updateInterval);
this.reposition();
}
this.resetBoard();
}
var board1 = new Leaderboard($("#board1"));
var board2 = new Leaderboard($("#board2"));
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.