[KOOGLE] Affichage des dés

Affichage CSS3 et animation Jquery

by toubia95

HTML

<div class="dice-wrapper"></div>

SCSS

.dice-wrapper {
   perspective:500px;
   perspective-origin:50% 50%;
}
.dice {
    width: 40px;height: 40px;
    background: #C3C3C3;
    border: solid 1px #fff;
    text-align: center;
    vertical-align: middle;
    line-height: 40px;
    float: left;
    font-family: verdana;
    font-size: 40px;
    color: #222;
    border-radius: 6px;
    &:nth-child(4n+1) {clear:left;}
}
.d1 {transform: rotate(0deg)}
.d2 {transform: rotate(90deg)}
.d3 {transform: rotate(180deg)}
.d4 {transform: rotate(270deg)}

JavaScript

// les dés
var Dices = [["E","T","U","K","N","O"],["E","V","G","T","I","N"],["D","E","C","A","M","P"],["I","E","L","R","U","W"],["E","H","I","F","S","E"],["R","E","C","A","L","S"],["E","N","T","D","O","S"],["O","F","X","R","I","A"],["N","A","V","E","D","Z"],["E","I","O","A","T","A"],["G","L","E","N","Y","U"],["B","M","A","Q","J","O"],["T","L","I","B","R","A"],["S","P","U","L","T","E"],["A","I","M","S","O","R"],["E","N","H","R","I","S"]];

// mélange des dés
function Shuffle(o) {
     for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
     return o;
};

RanDices = Shuffle(Dices);
AllDices = [];
for (i=0; i<16; i++) {
    FirstDice = Shuffle(RanDices[i]);
    AllDices[i] = FirstDice[0];
}

// Génération des dés
$.each(AllDices, function( index, value ) {
    var randn = Math.floor((Math.random()*4)+1);
    $('<div class="dice d'+randn+'">'+value+'</div>').appendTo('.dice-wrapper');
});

// Animation à l'affichage
var dis = $('.dice');
dis.hide();
var delay = 0;
dis.each(function() {
        var $di = $(this);
        $di.queue('fade', function(next) {
            $di.delay(delay).slideDown(100, next);
        });
        $di.dequeue('fade');
        delay += 30;
});