$(function() {
// Note the screen size.
var screenSize = {
height : $(document).height(),
width : $(document).width()
};
// Generate random bubbles on screen.
for (var i = 0; i < 500; i++) {
// Random location and size.
var size = Math.random() * 40 + 20,
left = screenSize.width * Math.random(),
top = screenSize.height * Math.random();
// Add the bubble to the page.
var bubble = $("
", {
"class" : "Bubble",
css : {
left : left,
top : top,
height : size,
width : size,
margin : "-" + (size / 2) + "px"
}
}).appendTo(document.body).get(0);
// Record this bubble's info into the element itself for easier access.
bubble.radius = size / 2;
}
// Retain the bubbles in memory as a jQuery object, for quicker access.
var bubbles = $(".Bubble");
// User's cursor bubble.
var userBubble = $("
", {
id : "UserBubble",
css : {
left : -100,
top : -100
}
}).appendTo(document.body);
// Note the user bubble's size.
var userBubbleRadius = userBubble.width() / 2;
// Page mouse move function...
$(document).mousemove(function(event) {
// Move the user bubble.
userBubble.css({
left : event.clientX,
top : event.clientY
});
// Check each bubble to see if it's overlapped by the user bubble.
bubbles.each(function() {
var pos = $(this).offset();
// Calculate distance between the user bubble and this bubble.
var distance = Math.sqrt(Math.pow(pos.left + this.radius - event.clientX, 2) +
Math.pow(pos.top + this.radius - event.clientY, 2)),
overlap = userBubbleRadius + this.radius - distance;
// If the bubbles overlap...
if (overlap > 0) {
var xMovement = (pos.left - event.clientX) * distance / 20,
yMovement = (pos.top - event.clientY) * distance / 20;
$(this).stop().animate({
left : (xMovement > 0 ? "+" : "-") + "=" + (xMovement > 0 ? xMovement : -xMovement),
top : (yMovement > 0 ? "+" : "-") + "=" + (yMovement > 0 ? yMovement : -yMovement)
}, 500);
}
});
});
});