Skip to content

Instantly share code, notes, and snippets.

@debloper
Last active August 29, 2015 14:07
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save debloper/c8fd6c328d471fbec6e9 to your computer and use it in GitHub Desktop.
Save debloper/c8fd6c328d471fbec6e9 to your computer and use it in GitHub Desktop.
Lean mouseover-on-page element animator scripts
// 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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment