const skewElement = () => {
const mouseMovefn = (e) => {
let xMouse = e.pageX - e.currentTarget.getBoundingClientRect().left - (e.currentTarget.offsetWidth / 2),
yMouse = e.pageY - window.pageYOffset - e.currentTarget.getBoundingClientRect().top - (e.currentTarget.offsetHeight / 2);
let mouseElements = [...e.currentTarget.querySelectorAll('*[data-mouse-parallax]')];
mouseElements.forEach(elem => {
let factor = elem.dataset.mouseParallax,
xFinal = xMouse * factor,
yFinal = yMouse * factor;
if (!elem.dataset.mouseSkew) {
TweenMax.to(elem, 1.2, {
x: xFinal,
y: yFinal,
skewX: xFinal * 0.2,
skewY: xFinal * 0.2
});
} else {
TweenMax.to(elem, 1.2, {
x: xFinal,
y: yFinal
});
}
});
};
const mouseleavefn = (e) => {
const mouseElements = Array.from(e.currentTarget.querySelectorAll('*[data-mouse-parallax]'));
mouseElements.forEach(elem => {
TweenMax.to(elem, 1.2, {
x: 0,
y: 0,
skewX: 0,
skewY: 0
});
});
};
let app = document.querySelector('#wrap');
app.addEventListener('mousemove', mouseMovefn);
app.addEventListener('mouseleave', mouseleavefn);
};
skewElement();