Skip to content

Instantly share code, notes, and snippets.

@danilostrazzullo
Created November 28, 2018 09:29
Show Gist options
  • Save danilostrazzullo/a6fcfe4ce2520bf33aa00c4c50042528 to your computer and use it in GitHub Desktop.
Save danilostrazzullo/a6fcfe4ce2520bf33aa00c4c50042528 to your computer and use it in GitHub Desktop.
Parallax-like interaction
// Parallax-like interaction "stolen" from https://www.awwwards.com/PWA-ebook
window.addEventListener('mousemove', move);
function move(){
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
window_width = w.innerWidth||e.clientWidth||g.clientWidth,
window_height = w.innerHeight||e.clientHeight||g.clientHeight;
var pos_x = (event.clientX/window_width);
var pos_y = (event.clientY/window_height);
TweenLite.to(document.querySelector(".ico-1"), 0.6, { x: pos_x * 20, y: pos_y * 20, transformOrigin:"center" });
TweenLite.to(document.querySelector(".ico-2"), 0.6, { x: -(pos_x * 10), y: -(pos_y * 10), transformOrigin:"center" });
TweenLite.to(document.querySelector(".ico-3"), 0.6, { x: pos_x * 15, y: pos_y * 10, transformOrigin:"center" });
TweenLite.to(document.querySelector(".ico-4"), 0.6, { x: pos_x * 20, y: pos_y * 20, transformOrigin:"center" });
TweenLite.to(document.querySelector(".ico-5"), 0.6, { x: -(pos_x * 10), y: -(pos_y * 10), transformOrigin:"center" });
TweenLite.to(document.querySelector(".ico-6"), 0.6, { x: pos_x * 15, y: -(pos_y * 5), transformOrigin:"center" });
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment