Skip to content

Instantly share code, notes, and snippets.

@Fabiantjoeaon
Last active October 30, 2016 16:04
Show Gist options
  • Save Fabiantjoeaon/296ce21b51d943a7de8e1c6507881340 to your computer and use it in GitHub Desktop.
Save Fabiantjoeaon/296ce21b51d943a7de8e1c6507881340 to your computer and use it in GitHub Desktop.
Vanilla JS on mousemove. Make sure to add 'data-offset' attribute and specified class to element.
const mouseMoveEls = Array.from(document.getElementsByClassName('transform__mm'));
document.addEventListener( 'mousemove', (e) => {
const width = window.outerWidth;
const height = window.outerHeight;
const offsetX = 0.5 - e.pageX / width;
const offsetY = 0.5 - e.pageY / height;
mouseMoveEls.forEach((el, i) => {
const dataOffset = parseInt(el.getAttribute('data-offset'));
const translate = `translate3d(${Math.round(offsetX * dataOffset)}px, ${Math.round(offsetY * dataOffset)}px, 0px)`;
el.style.webkitTransform = translate;
el.style.MozTransform = translate;
el.style.msTransform = translate;
el.style.OTransform = translate;
el.style.transform = translate;
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment