Difference between revisions of "Template:Vilnius-Lithuania/JS/Engineering"
| Line 10: | Line 10: | ||
if (window.innerWidth < 767) { | if (window.innerWidth < 767) { | ||
if (window.innerWidth < window.innerHeight) isMobile = true | if (window.innerWidth < window.innerHeight) isMobile = true | ||
| − | }; | + | } else { |
| + | isMobile = false; | ||
| + | } | ||
eXc = window.innerWidth * (isMobile ? 0 : 0.5); | eXc = window.innerWidth * (isMobile ? 0 : 0.5); | ||
| − | eYc = window.innerHeight * (isMobile ? 0. | + | eYc = window.innerHeight * (isMobile ? 0.6 : 0.7); |
dXc = window.innerWidth * (isMobile ? 0 : 0.1); | dXc = window.innerWidth * (isMobile ? 0 : 0.1); | ||
| − | dYc = window.innerHeight * (isMobile ? | + | dYc = window.innerHeight * (isMobile ? 1 : 1.2) |
innHeight = window.innerHeight; | innHeight = window.innerHeight; | ||
}) | }) | ||
| Line 21: | Line 23: | ||
if (window.innerWidth < 767) { | if (window.innerWidth < 767) { | ||
if (window.innerWidth < window.innerHeight) isMobile = true | if (window.innerWidth < window.innerHeight) isMobile = true | ||
| − | }; | + | } else { |
| + | isMobile = false; | ||
| + | } | ||
eXc = window.innerWidth * (isMobile ? 0 : 0.5); | eXc = window.innerWidth * (isMobile ? 0 : 0.5); | ||
| − | eYc = window.innerHeight * (isMobile ? 0. | + | eYc = window.innerHeight * (isMobile ? 0.6 : 0.7); |
dXc = window.innerWidth * (isMobile ? 0 : 0.1); | dXc = window.innerWidth * (isMobile ? 0 : 0.1); | ||
| − | dYc = window.innerHeight * (isMobile ? | + | dYc = window.innerHeight * (isMobile ? 1 : 1.2) |
innHeight = window.innerHeight; | innHeight = window.innerHeight; | ||
}) | }) | ||
| Line 38: | Line 42: | ||
//waves | //waves | ||
var setWaveParams = () => { | 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, | |
| − | + | }; | |
| − | } | + | } |
| − | //move footer to main tag | + | //move footer to main tag |
| − | window.addEventListener('load', function(){ | + | // window.addEventListener('load', function() { |
| − | document.querySelector('main').appendChild(document.getElementById('footerWrapper')); | + | // document.querySelector('main').appendChild(document.getElementById('footerWrapper')); |
| − | }); | + | // }); |
Revision as of 11:25, 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
} else {
isMobile = false;
}
eXc = window.innerWidth * (isMobile ? 0 : 0.5);
eYc = window.innerHeight * (isMobile ? 0.6 : 0.7);
dXc = window.innerWidth * (isMobile ? 0 : 0.1);
dYc = window.innerHeight * (isMobile ? 1 : 1.2)
innHeight = window.innerHeight;
})
window.addEventListener('resize', function() {
if (window.innerWidth < 767) {
if (window.innerWidth < window.innerHeight) isMobile = true
} else {
isMobile = false;
}
eXc = window.innerWidth * (isMobile ? 0 : 0.5);
eYc = window.innerHeight * (isMobile ? 0.6 : 0.7);
dXc = window.innerWidth * (isMobile ? 0 : 0.1);
dYc = window.innerHeight * (isMobile ? 1 : 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,
};
}
//move footer to main tag
// window.addEventListener('load', function() {
// document.querySelector('main').appendChild(document.getElementById('footerWrapper'));
// });