A CodePen by Rémy Bach. Can't Touch This! - I was reminded of something from way back in the day where there was a button on the screen that dodged your mouse every time you came close to it. After trying to hunt it down, I thought I'd quickly throw my ow

index.markdown

Can't touch this!

script.js

jQuery(function($) {
  	var offset = 50, // How far away (in px) from the stop element before it dodges the mouse.
			stop = $('.hammertime'),
			stopH = stop.outerHeight(),
			stopW = stop.outerWidth(),
			/*
				The viewport height and width, less the height and width of the stop element.
				Do this here for performance reasons.
				If you want this to be responsive, this needs to be *inside* the mousemove
				(maybe throttle it by making it not happen 60 times a second somehow).
			*/
			vH = $(window).height() - stopH,
			vW = $(window).width() - stopW;

	$(window).mousemove(function(e) {
		var pos = stop.position();
		
		// Figure out if the mouse position is near enough to the element.
		if (e.pageX > pos.left - offset && e.pageX < pos.left + stopW + offset &&
			e.pageY > pos.top - offset && e.pageY < pos.top + stopH + offset ) {
			// stop any currently going animation and move the element to a random position.
			stop.stop().animate({
				left: randomInt(0, vW),
				top: randomInt(0, vH)
			}, 100);
		}
	});
	
	// Returns a random integer between min and max
	// This function was lifted from here (#lazyweb): https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Math/random
	function randomInt(min, max) {
		return Math.floor(Math.random() * (max - min + 1)) + min;
	}
});

style.scss

@import "compass";
body {
  background:url(http://subtlepatterns.com/patterns/ravenna.png);
  padding:10px;
}
.hammertime {
  color:#000;
  display:inline-block;
  position:relative;
  text-decoration:none;
}
.hammertime img {
  display:block;
  height:48px;
  margin:5px auto;
  width:48px;
}