You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
212 lines
5.7 KiB
212 lines
5.7 KiB
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;
|
|
|