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

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;