class scroll { goToTop = () => { window.scrollTo(0, 0); }; homeScrollHandler = (index) => { const prevScroll = Number(localStorage.getItem('prevScroll')); const height = Number(window.innerHeight); const scrollY = Number(window.scrollY); if (index === 1) { if (scrollY === 0) { return 0; }else if (scrollY > 0 && scrollY <= height) { return -scrollY; } if (scrollY > height) { return -height; } } else if (index === 2) { if (scrollY === 0) { return height; } if (scrollY > 0 && scrollY <= height) { return height - scrollY; } if (scrollY > 10 * height) { return -1 * height; } } else if (index === 3) { if (scrollY <= 3.5 * height) { return height; } if (scrollY > 3.5 * height && scrollY <= 4 * height) { return 4 * height - scrollY; } if (scrollY > 10 * height) { return -height; } } else if (index === 4) { if (scrollY <= 5 * height) { return height; } else if (scrollY > 5 * height && scrollY < 6 * height) { return 6 * height - scrollY; } if (scrollY === 10 * height) { return -height; } } else if (index === 5) { if (scrollY <= 7.3 * height) { return height; } else if (scrollY > 7.3 * height && scrollY < 8.3 * height) { return 8.3 * height - scrollY; } if (scrollY === 10 * height) { return -height; } } }; linearFormula = (currentScroll, position1, position2, scroll1, scroll2) => { const alpha = (currentScroll - scroll1) / (scroll2 - scroll1); const deltaPosition = position2 - position1; const currentPosition = position1 + deltaPosition * alpha; return currentPosition; }; videoLinearFormula = (currentScroll) => { if (!localStorage.getItem("htmlRect")) { localStorage.setItem( "htmlRect", JSON.stringify(document.getElementById("video").getBoundingClientRect()) ); } const htmlRect = JSON.parse(localStorage.getItem("htmlRect")) || document.getElementById("video").getBoundingClientRect(); const joiRect = JSON.parse(localStorage.getItem("joiRect")); const currentWidth = this.linearFormula( currentScroll, htmlRect.width, joiRect.width, 3.5 * window.innerHeight, 4 * window.innerHeight ); const currentHeight = this.linearFormula( currentScroll, htmlRect.height, joiRect.height, 3.5 * window.innerHeight, 4 * window.innerHeight ); const currentLeft = this.linearFormula( currentScroll, htmlRect.left, joiRect.left, 3.5 * window.innerHeight, 4 * window.innerHeight ); const currentTop = this.linearFormula( currentScroll, htmlRect.top, joiRect.top - window.innerHeight, 3.5 * window.innerHeight, 4 * window.innerHeight ); return { width: currentWidth, height: currentHeight, top: currentTop, left: currentLeft, }; }; testLinearFolmula = (currentScroll) => { const testRect = JSON.parse(localStorage.getItem("testRect")); const currentWidth = this.linearFormula( currentScroll, testRect.width, window.innerWidth, 4.5 * window.innerHeight, 5 * window.innerHeight ); const currentHeight = this.linearFormula( currentScroll, testRect.height, window.innerHeight, 4.5 * window.innerHeight, 5 * window.innerHeight ); const currentLeft = this.linearFormula( currentScroll, testRect.left, 0, 4.5 * window.innerHeight, 5 * window.innerHeight ); const currentTop = this.linearFormula( currentScroll, testRect.top, 0, 4.5 * window.innerHeight, 5 * window.innerHeight ); return { width: currentWidth, height: currentHeight, top: currentTop, left: currentLeft, }; }; initializeBoxPosition = (currentScroll) => { const height= window.innerHeight; if(currentScroll < height){ return { translateX: -5, translateY: -5, rotate: 5 } } if(currentScroll > height && currentScroll < 2 * height){ return { translateX: this.linearFormula(currentScroll, -5, 32, height, 2 * height), translateY: this.linearFormula(currentScroll, -5, 10, height, 2 * height), rotate: this.linearFormula(currentScroll, 5, 0, height, 2 * height) } } if(currentScroll > 2 * height && currentScroll <= 2.5 * height){ return { translateX: 32, translateY: 10, rotate: 0 } } if(currentScroll > 2.5 * height && currentScroll <= 3 * height){ return { translateX: this.linearFormula(currentScroll, 32, 32, 2.5 * height, 3 * height), translateY: this.linearFormula(currentScroll, 10, -30, 2.5 * height, 3 * height), rotate: this.linearFormula(currentScroll, 0, 0, 2.5 * height, 3 * height) } } if(currentScroll > 3 * height){ return { translateX: 32, translateY: -30, rotate: 0 } } }; initializeMobileUnit = (currentScroll) => { const height = window.innerHeight; if (currentScroll > 2 * height && currentScroll <= 2.3 * height) { return 1; } else if (currentScroll > 2.3 * height && currentScroll <= 2.7 * height) { return 2; } else if (currentScroll > 2.7 * height && currentScroll <= 2.8 * height) { return 3; } else if (currentScroll > 2.8 * height && currentScroll < 3.5 * height) { return 4; } } } const _scroll = new scroll(); export default _scroll;