Giant Hand Cursor

gistfile1.js

//get previous position, so hand doesn't jump on route changes
var xPos = 0;
  var yPos = 0;

  var storePos = function(x,y){
    xPos = x;
    yPos = y;
  };

  var getPos = function(){
    
    var positions = {
      x: xPos,
      y: yPos
    };

    return positions;
  };

  // Public API here
  return {
    storePos: function (x,y) {
      storePos(x,y);
    },
    getPos: function(){
      return getPos();
    }
  };



//hand movements
var frame = $('#main-frame');

		var pos = mousePosition.getPos();

		var xPos = pos.x;
		var yPos = pos.y;

		//set initial css based on prev position, add 10px for offset 
		element.css({
			left: xPos + 10,
			top: yPos + 10
		});

		//listen for changes
		frame.on('mousemove', function(e){
			xPos = e.pageX;
			yPos = e.pageY;
			element.css({
				left: xPos + 10,
				top: yPos + 10
			});
		});