// Parallax Image Supporting Code
const mouse = { x: -100, y: -100 }; // mouse pointer's coordinates
const pos = { x: 0, y: 0 }; // cursor's coordinates
const speed = 0.1; // between 0 and 1
const updateCoordinates = e => {
mouse.x = e.clientX;
mouse.y = e.clientY;
}
window.addEventListener('mousemove', updateCoordinates);
let imagesMid = document.querySelectorAll(".parallax-image--mid");
let imagesBot = document.querySelectorAll(".parallax-image--bot");
function updateImage(imageElement, multiplyer) {
let imageRect = imageElement.getBoundingClientRect();
let imageWidth = imageRect.left - imageRect.right;
let imageHeight = imageRect.top - imageRect.bottom;
let mouseDistX = (mouse.x - imageRect.left + (imageWidth / 2)) * multiplyer;
let mouseDistY = (mouse.y - imageRect.top + (imageHeight / 2)) * multiplyer;
//console.log(mouse.y);
//console.log(imageMidRect.top);
let translateMid = 'translate(calc(-50% + ' + mouseDistX + 'px) , calc(-50% + ' + mouseDistY +'px))';
imageElement.style.transform = translateMid;
}
function loop() {
for (const imageMid of imagesMid) {
updateImage(imageMid, 0.02);
}
for (const imageBot of imagesBot) {
updateImage(imageBot, 0.04);
}
requestAnimationFrame(loop);
}
requestAnimationFrame(loop);
// End Parallax Image Supporting Code
