Difference between revisions of "Template:Vilnius-Lithuania/JS/Engineering"
(Created page with "//cycles let engCyc = document.querySelector('#engineering-cycle svg'); let dtpCyc = document.querySelector('#dtp-cycle svg'); let stopEl = document.querySelector('.spacer');...") |
|||
| Line 4: | Line 4: | ||
let stopEl = document.querySelector('.spacer'); | let stopEl = document.querySelector('.spacer'); | ||
let isMobile = false; | let isMobile = false; | ||
| + | let eXc, eYc, dXc, dYc | ||
window.addEventListener('load', function() { | window.addEventListener('load', function() { | ||
| Line 9: | Line 10: | ||
if (window.innerWidth < window.innerHeight) isMobile = true | 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) | ||
}) | }) | ||
| Line 15: | Line 20: | ||
if (window.innerWidth < window.innerHeight) isMobile = true | 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) | ||
}) | }) | ||
| Line 20: | Line 29: | ||
if (stopEl.getBoundingClientRect().top > 0) { | if (stopEl.getBoundingClientRect().top > 0) { | ||
let dist = window.scrollY / window.innerHeight; | let dist = window.scrollY / window.innerHeight; | ||
| − | let eX = dist * | + | let eX = dist * eXc |
| − | let eY = dist * | + | let eY = dist * eYc |
| − | let dX = dist * | + | let dX = dist * dXc |
| − | let dY = dist * | + | let dY = dist * dYc |
let eScale = 1 - dist * (isMobile ? 0.5 : 0.65); | let eScale = 1 - dist * (isMobile ? 0.5 : 0.65); | ||
let dScale = 1 - dist * (isMobile ? 0.15 : 0.3); | let dScale = 1 - dist * (isMobile ? 0.15 : 0.3); | ||
Revision as of 09:08, 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
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,
};
}