Difference between revisions of "Template:Vilnius-Lithuania/JS/Engineering"

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 / window.innerHeight;
+
         let dist = window.scrollY / innHeight;
−
         let eX = dist * eXc
+
         engCyc.style.transform = `scale(${1 - dist * (isMobile ? 0.5 : 0.65)}) translate(-${dist * eXc}px,-${dist * eYc}px)`;
−
        let eY = dist * eYc
+
         dtpCyc.style.transform = `scale(${1 - dist * (isMobile ? 0.15 : 0.3)}) translate(${dist * dXc}px,-${dist * dYc}px)`;
−
        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)`;
+
 
     }
 
     }
 
});
 
});

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,
   };

}