//cycles let engCyc = document.querySelector('#engineering-cycle svg'); let dtpCyc = document.querySelector('#dtp-cycle svg'); let stopEl = document.querySelector('.spacer'); let isMobile = false; let eXc, eYc, dXc, dYc
window.addEventListener('load', function() {
if (window.innerWidth < 767) { if (window.innerWidth < window.innerHeight) isMobile = true }; eXc = window.innerWidth * (isMobile ? 0 : 0.5); eYc = window.innerHeight * (isMobile ? 0.5 : 0.7); dXc = window.innerWidth * (isMobile ? 0 : 0.1); dYc = window.innerHeight * (isMobile ? 0.9 : 1.2)
})
window.addEventListener('resize', function() {
if (window.innerWidth < 767) { if (window.innerWidth < window.innerHeight) isMobile = true }; eXc = window.innerWidth * (isMobile ? 0 : 0.5); eYc = window.innerHeight * (isMobile ? 0.5 : 0.7); dXc = window.innerWidth * (isMobile ? 0 : 0.1); dYc = window.innerHeight * (isMobile ? 0.9 : 1.2)
})
window.addEventListener("scroll", () => {
if (stopEl.getBoundingClientRect().top > 0) { let dist = window.scrollY / window.innerHeight; let eX = dist * eXc let eY = dist * eYc let dX = dist * dXc let dY = dist * dYc let eScale = 1 - dist * (isMobile ? 0.5 : 0.65); let dScale = 1 - dist * (isMobile ? 0.15 : 0.3); engCyc.style.transform = `scale(${eScale}) translate(-${eX}px,-${eY}px)`; dtpCyc.style.transform = `scale(${dScale}) translate(${dX}px,-${dY}px)`; }
}); //waves var setWaveParams = () => {
let container = document.querySelector(".milkWave"); return { width: container.offsetWidth, height: container.offsetHeight, waveWidth: container.offsetWidth, waveHeight: container.offsetHeight * 0.2, waveDelta: 25, speed: 0.15, wavePoints: 5, };
}