CSS circle background with cursor parallax!

by William Green

HTML

<div id="superContainer"></div>

CSS

#superContainer {
    background-color:#eee;
    right:0;
    top:0;
    bottom:0;
    left:0;
    position:fixed;
}

.circle {
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    position:absolute;
    border-radius:50%;
}

JavaScript

window.onload = function(){
    var colors = ['#fff','#000','#FF5560','#F2FF20','#A3FFD0','#5DA5FF','#FF7AD2','#35FFA7','#FF8539','#61FF78','#0050FF'];
    for(var i = 0; i != 600; i++)
    {
        var dimensions = Math.floor(Math.random()*200)+'px';
        var zIndex = Math.floor(Math.random()*10);
        var topPosition = Math.floor(Math.random()*window.innerHeight*5)+'px';
        var leftPosition = Math.floor(Math.random()*window.innerWidth*5)+'px';
        document.getElementById('superContainer').innerHTML += '<div class="circle" data-move-speed="'+Math.floor((Math.random() * 10) + 1)+'" style="z-index:'+zIndex+'; left:'+leftPosition+'; top:'+topPosition+'; width:'+dimensions+'; height:'+dimensions+'; background-color:'+colors[Math.floor(Math.random() * 9)]+';"></div>';
    }
    
    window.onmousemove = function(event){
        var circleContainer = document.getElementById('superContainer');
        var circles = circleContainer.getElementsByClassName('circle');
        for(var i = 0; i != circles.length; i++)
        {
            //circles[i].style.transform = 'translate('+event.clientX - window.innerWidth/2+')';transform: translate(50px,50px); 
            /* Standard syntax */
            circles[i].style.marginLeft = event.clientX/ + circles[i].dataset.moveSpeed +  - window.innerWidth/2+'px';
            circles[i].style.marginTop = event.clientY/ + circles[i].dataset.moveSpeed +  - window.innerHeight/2+'px';
        }
    };
};