hardware-acceleration

by basecss

HTML

<input id="hw_toggle" type="checkbox" disabled="false">Use hardware acceleration (Can take a while after clicking so be patient)</input>
<br>
<button id="btn_start">Start animation</button><span id="info" style="display: none;"> (Reload page to try again)</span>
<div id="stage1">
        
</div>

CSS

body{
    font-family: arial, sans-serif;
    color: #333;
    font-size: 13px;
}

#stage1{
    width: 300px;
    height: 150px;
    border: 1px solid #ccc;
    position: absolute;
}

.box{
    width: 5px;
    height: 5px;
    background-color: #2b8bdc;
    position: absolute;
    top: 0;
    transition: all 1s ease-in;
    -webkit-transition: all 1s ease-in;
    -moz-transition: all 1s ease-in;
    -o-transition: all 1s ease-in;
    -ms-transition: all 1s ease-in;
}

.acc{
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -o-transform: translateZ(0);
    -ms-transform: translateZ(0);
}

JavaScript

// Random key generator
function getRandom(min, max) {
    if(min > max) return -1;
    if(min == max) return min;
    var r;
    do r = Math.random();
    while(r == 1.0);
    return min + parseInt(r * (max-min+1));
}

$(document).ready(function(){
    
    // Enable or disable hardware-acceleration
    $("#hw_toggle").click(function(){
        // $(".box").toggleClass("acc");
        $("#stage1").toggleClass("acc");
    });
    
    // Enable buttons
    $("#hw_toggle, #btn_start").prop("disabled", false);
    
    $("#btn_start").click(function(){
        // Disable buttons
        $("#hw_toggle, #btn_start").prop("disabled", true);
        
        $("#info").css("display", "inline");
        
        // Prepare animation
        var use_hw_acc =             $('#hw_toggle').attr('checked');
        $(".box").each(function(){
            var box = this;
            var rand = getRandom(0, 5000); // Don't let all boxes start at the same time
            setTimeout(function(){
                // Start animation for the current box
                $(box).css({
                    "top": "145px"
                });
            }, rand);
        });
    });
    
    // Init mini boxes
    var max = 4000;
    var w = 300;
    for (var i=0; i<max; i++){
        var left = i;
        if (left>w-5){
            left = left % (w-5);
        }
        $('#stage1').append('<div class="box" style="left: ' + left +'px;"></div>');
    }
});