Bounce In transition

transition example using velocityJs

by dimshik

HTML

<script src="http://cdn.jsdelivr.net/velocity/1.2.1/velocity.min.js"></script>
<script src="http://cdn.jsdelivr.net/velocity/1.2.1/velocity.ui.min.js"></script>
<h2>Bounce In Transition + Randomize Colors + Mark The Correct One</h2>

<div class="wrapper">
    <ul class="boxes">
        <li class="box"></li>
        <li class="box"></li>
        <li class="box"></li>
        <li class="box"></li>
        <li class="box"></li>
        <li class="box"></li>
        <li class="box"></li>
        <li class="box"></li>
        <li class="box"></li>
    </ul>
</div>

CSS

.wrapper {
    border: 1px solid red;
    width: 400px;
    height: 400px;
}
.boxes {
    list-style: none;
    margin:0;
    padding:0;
}
.box {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    float: left;
    margin: 15px;
    text-align: center;
    line-height: 100px;    
    font-weight:bold;
    color: white;
    text-transform: uppercase;
    font-size: 15px;
    font-family:arial;
   display:none;
}

.correct {
        outline: 3px dotted black;
}

JavaScript

var originalColorNames = 
    ['blue','red','green','pink','orange','purple','brown','yellow','cyan'];

var originalColorValues =
    ['#375FFF','#FF3221','#3EDD46','#E434FF','#FF8C00','#A100FF','#7F412A','#FFDC00','#2FDBFF'];

/*
// This is not in use
var colors = [{'name': 'blue','hex': '#375FFF'}, 
              {'name': 'red','hex': '#FF3221'}, 
              {'name': 'green','hex': '#3EDD46'}, 
              {'name': 'pink','hex': '#E434FF'}, 
              {'name': 'orange','hex': '#FF8C00'}, 
              {'name': 'purple','hex': '#A100FF'}, 
              {'name': 'brown','hex': '#7F412A'}, 
              {'name': 'yellow','hex': '#FFDC00'}, 
              {'name': 'cyan','hex': '#2FDBFF'}];
*/

Array.prototype.completeDisorder = function () {
  var i, j, tmp;
  for (i = 0; i < this.length - 1; i++) {
    j = i + 1 + Math.floor((this.length - i - 1) * Math.random());
    tmp = this[j];
    this[j] = this[i];
    this[i] = tmp;
  }
  return this;
};

/**
 * Returns a random integer between min (inclusive) and max (inclusive)
 * Using Math.round() will give you a non-uniform distribution!
 */
function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function setColors() {
    var $boxes = $('.box');
    
    // create duplicates of the original arrays
    var newColorNames = originalColorNames.slice();
    var newColorValues = originalColorValues.slice();  
    
    var correctColorIndex = getRandomInt(0,8);
    
    var correctColor = {};
    
    // The splice() method adds/removes items to/from an array, and returns the removed item(s).
    correctColor.name = newColorNames.splice(correctColorIndex,1);
    correctColor.value = newColorValues.splice(correctColorIndex,1);

    // this is nedded to return the correct color back to the arrays
    var newCorrectColorIndex = getRandomInt(0,7);

    // this will scramble all the names
    newColorNames.completeDisorder();
    
    // here i return the correct color to...