Lean mouseover-on-page element animator scripts

repel.js

// Set the element to select; the only moving part here
// Like literally...
var elem = document.querySelector("elem")
  , html = document.querySelector("html");

// Apply positioning, just in case it wasn't already
elem.style.position = "absolute";

// Take the viewport height/width into consideration
// @TODO: should be updated on window resize
var height = document.documentElement.clientHeight
  , width  = document.documentElement.clientWidth;

// ------------ SAFE TO SNIP FROM HERE ------------ //
// Simple method to be called by the next section
// Resets the element back to its initial position
var reset = function (event) {
  elem.style.top  = "0";
  elem.style.left = "0";
}

// If you'd rather not wanna have the element reset
// back to its original position - comment it out:
html.addEventListener("mouseenter", reset, false);
html.addEventListener("mouseleave", reset, false);
// ------------ SAFE TO SNIP TILL HERE ------------ //

// Here's where the magic happens... look away!
html.addEventListener("mousemove", function (event) {
  elem.style.top  = (height/2 - event.clientY)/50 + "px";
  elem.style.left = (width/2  - event.clientX)/50 + "px";
}, false);