Mouse Following Bubbles

by marakoss

HTML

<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

JavaScript

var interval = null;

var colors = ['#000000', '#ff0000', '#00ff00', '#0000ff', '#ff00ff', '#00ffff', '#ffff00', '#ffffff', '#cccccc', '#9945a0'];

var cssObj = {
    'width': '10px',
    'height': '10px',
    'display': 'block',
    'position': 'absolute',
    'border-radius': '100px'
}

var mouse_x = 0, mouse_y = 0;

var elements = $('body div');

function runanimation() {
    elements.stop().each(function() {
        var size = (Math.random() * 70);
        var pos_x = Math.floor(Math.random() * 100);
        var pos_y = Math.floor(Math.random() * 50);
        $(this).animate({
            "opacity": (Math.round(Math.random() * 10) / 10),
            "left": Math.floor(mouse_x + 50  - (pos_x*1.5) )+"px",
            "top": Math.floor(mouse_y + 25 - (pos_y*1.5) )+"px",
            "background-color": colors[Math.floor(Math.random() * 10)],
            "width": size + "px",
            "height": size + "px"
        }, {
            "duration": 500,
            "easing": "easeOutQuint"
        });
    });
}

function step(timestamp) {

	runanimation();
    window.requestAnimationFrame(step);
}

window.requestAnimationFrame(step);

$(document).bind('mousemove', function(e) {
    mouse_x = e.pageX;
    mouse_y = e.pageY;
});

elements.css(cssObj);