Line 5: | Line 5: | ||
let isMobile = false; | let isMobile = false; | ||
let eXc, eYc, dXc, dYc | let eXc, eYc, dXc, dYc | ||
+ | let innHeight = 700 | ||
window.addEventListener('load', function() { | window.addEventListener('load', function() { | ||
Line 14: | Line 15: | ||
dXc = window.innerWidth * (isMobile ? 0 : 0.1); | dXc = window.innerWidth * (isMobile ? 0 : 0.1); | ||
dYc = window.innerHeight * (isMobile ? 0.9 : 1.2) | dYc = window.innerHeight * (isMobile ? 0.9 : 1.2) | ||
+ | innHeight = window.innerHeight; | ||
}) | }) | ||
Line 24: | Line 26: | ||
dXc = window.innerWidth * (isMobile ? 0 : 0.1); | dXc = window.innerWidth * (isMobile ? 0 : 0.1); | ||
dYc = window.innerHeight * (isMobile ? 0.9 : 1.2) | dYc = window.innerHeight * (isMobile ? 0.9 : 1.2) | ||
+ | innHeight = window.innerHeight; | ||
}) | }) | ||
window.addEventListener("scroll", () => { | window.addEventListener("scroll", () => { | ||
if (stopEl.getBoundingClientRect().top > 0) { | if (stopEl.getBoundingClientRect().top > 0) { | ||
− | let dist = window.scrollY / | + | let dist = window.scrollY / innHeight; |
− | + | engCyc.style.transform = `scale(${1 - dist * (isMobile ? 0.5 : 0.65)}) translate(-${dist * eXc}px,-${dist * eYc}px)`; | |
− | + | dtpCyc.style.transform = `scale(${1 - dist * (isMobile ? 0.15 : 0.3)}) translate(${dist * dXc}px,-${dist * dYc}px)`; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | dtpCyc.style.transform = `scale(${ | + | |
} | } | ||
}); | }); |
Revision as of 09:29, 11 October 2020
//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 let innHeight = 700
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) innHeight = window.innerHeight;
})
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) innHeight = window.innerHeight;
})
window.addEventListener("scroll", () => {
if (stopEl.getBoundingClientRect().top > 0) { let dist = window.scrollY / innHeight; engCyc.style.transform = `scale(${1 - dist * (isMobile ? 0.5 : 0.65)}) translate(-${dist * eXc}px,-${dist * eYc}px)`; dtpCyc.style.transform = `scale(${1 - dist * (isMobile ? 0.15 : 0.3)}) translate(${dist * dXc}px,-${dist * dYc}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, };
}