Circle Expanding

by colintoh

HTML

<div id="wrapper">
    <div id="circle">1</div>
</div>

CSS

html,body {
    height:100%;
}

#wrapper {
    width:100%;
    height:100%;
    background:black;
    overflow:hidden;
}

#circle {
    background:url('http://ice-phone.com/images/violet.png');
    width:1px;
    height:1px;
    border-radius:100%;
    margin:0 auto;
    position:relative;
}

JavaScript

function onResize() {
    var ww = $('#wrapper').width(),
        wh = $('#wrapper').height(),
        ch = $('#circle').width();
    var circleTop = wh / 2 - ch / 2;
    var circleLeft = ww / 2 - ch / 2;
    $('#circle').css('top', circleTop + 'px');
    if(circleLeft < 0){
        $('#circle').css('left', circleLeft + 'px');
    }
}

$(window).resize(onResize);

var wid = 1;
function init() {
    
    if(wid <1200){
        $('#circle').width(wid);
        $('#circle').height(wid);
        wid+=55;
        onResize();
    }
}

init();
    
window.requestAnimFrame = (function() {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
    function(callback) {
        window.setTimeout(callback, 1000 / 60);
    };
})();


(function animloop() {
    requestAnimFrame(animloop);
    init();
})();