Skip to content

Instantly share code, notes, and snippets.

@paulirish
Created January 25, 2010 23:55
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save paulirish/286396 to your computer and use it in GitHub Desktop.
Save paulirish/286396 to your computer and use it in GitHub Desktop.
/*
keepaway: a silly plugin that makes elements run from the mouse
by sneakyness.
options:
jump: the distance to jump away from the mouse, in pixels; default 500
speed: the speed to move (passed intact to the animate plugin); default ÔfastÕ
home: time to return to the starting position if nothing happens, in ms; default 1000
Uses lots of expando properties and closures, so it's probably a memory hog.
*/
$.fn.keepaway = function(options){
options = $.extend({speed: 'fast', jump: 500, home: 1000}, options);
return this.each(function(){
var $this = $(this).css({position: 'relative'}).
focus(function(){$this.blur()}); // don't let it get the focus
var bounds = $this.parent().offset();
bounds.right = bounds.left + $this.parent().width()-$this.width();
bounds.bottom = bounds.top + $this.parent().height()-$this.height();
var xy = $this.offset(); // record the original position since we are using relative coordinates
var center = {x: $this.width()/2, y: $this.height()/2};
var returnHome; // timeout timer to return to own place
$this.mouseover(function(e){
var offset = $this.offset();
offset.left += center.x-e.pageX;
offset.top += center.y-e.pageY; // now offset = center of $this - mouse position
var denom = Math.sqrt(offset.left*offset.left+offset.top*offset.top);
if (denom != 0){
var x = e.pageX+offset.left*options.jump/denom;
var y = e.pageY+offset.top*options.jump/denom;
}else{
x = e.pageX+options.jump;
y = e.pageY+options.jump;
}
if (x > bounds.right) x -= options.jump;
if (x < bounds.left) x += options.jump;
if (y > bounds.bottom) y -= options.jump;
if (y < bounds.top) y += options.jump;
$this.stop().animate({left: x-xy.left+'px', top: y-xy.top+'px'}, options.speed);
clearTimeout(returnHome);
returnHome = setTimeout (function(){
$this.stop().animate({left: '0px', top: '0px'}, options.home);
}, options.home);
});
});
};
$(function(){
$('a').keepaway({speed: 300, jump: 1, home: 1400}).click(function(){return false;});
$('img').keepaway({speed: 300, jump: 1, home: 1400}).click(function(){return false;});
$('p').keepaway({speed: 300, jump: 1, home: 1400}).click(function(){return false;});
$('fieldset').keepaway({speed: 300, jump: 1, home: 1400}).click(function(){return false;});
$('tr').keepaway({speed: 300, jump: 1, home: 1400}).click(function(){return false;});
$('td').keepaway({speed: 300, jump: 1, home: 1400}).click(function(){return false;});
});
/*
rainbow seisure background
$(".container").fadeOut(100);
$("#content_wrapper").slideUp(100);
$("#header_wrapper").slideUp(100);
setInterval(function() {
var color = "";
for(i = 0; i < 6; i++) {
randVal = Math.random()*9;
thiscolor = Math.round(randVal);
color += thiscolor;
}
color = "#"+color;
$("body").css("background-color", color); }, 10);
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment