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.
 
 
 

167 lines
4.9 KiB

import React, { useEffect, useState } from "react";
import { scrollAction } from "../../../redux/actions";
import { connect } from "react-redux";
import Page1 from "./Page1";
import Page2 from "./Page2";
import Page3 from "./Page3";
import Page4 from "./Page4";
import VideoTube from "./VideoTube";
function Home({
floatMouseToggle,
handlePage1TopPosition,
handlePage2TopPosition,
handlePage2RotateX,
handlePage2BoxPosition,
handlePage2MobilePosition,
handlePage2VideoPosition,
handlePage2VideoTopPosition,
handlePage2MobileUnit,
handleVideoTubeTopPosition,
handleTestTranslateY,
handlePage3TopPosition,
handlePage3TestTranslateY,
handlePage4TopPosition,
}) {
const height = window.innerHeight;
// initialState
useEffect(() => {
window.addEventListener("scroll", () => {
if (window.innerWidth > 1024) {
const scrollY = window.scrollY;
localStorage.setItem("prevScroll", scrollY);
if (
!JSON.parse(localStorage.getItem("joiRect")) &&
window.scrollY > 1000 &&
window.scrollY < 2000
) {
localStorage.setItem(
"joiRect",
JSON.stringify(
document.getElementById("video-joi").getBoundingClientRect()
)
);
}
// Dotes
if (scrollY < 1.5 * height) {
if (scrollY > height) {
floatMouseToggle(false);
} else {
floatMouseToggle(true);
}
}
// Page_1
if (scrollY >= 0 && scrollY <= height) {
handlePage1TopPosition();
}
// Page_2
if (scrollY >= 0 && scrollY <= height) {
handlePage2TopPosition();
}
if (scrollY >= 0 && scrollY <= height) {
handlePage2RotateX(window.scrollY);
}
if (scrollY >= height && scrollY <= 2 * height) {
handlePage2BoxPosition({
scrollY,
translateX: {
pos1: -5,
pos2: 32,
},
translateY: {
pos1: -5,
pos2: 10,
},
rotate: {
pos1: 5,
pos2: 0,
},
start: height,
end: 2 * height,
});
}
if (scrollY > 2.5 * height && scrollY <= 3 * height) {
handlePage2BoxPosition({
scrollY,
translateX: {
pos1: 32,
pos2: 32,
},
translateY: {
pos1: 10,
pos2: -30,
},
rotate: {
pos1: 0,
pos2: 0,
},
start: 2.5 * height,
end: 3 * height,
});
}
if (scrollY > 2 * height && scrollY <= 2.5 * height) {
handlePage2MobilePosition();
}
if (scrollY > 2.8 * height && scrollY <= 3 * height) {
handlePage2VideoTopPosition();
}
if (scrollY > 3.5 * height && scrollY <= 4 * height) {
handlePage2VideoPosition();
}
if (scrollY > 2 * height && scrollY < 3.5 * height) {
handlePage2MobileUnit();
}
// Page_3
if (scrollY > 3.5 * height && scrollY < 4 * height) {
handleVideoTubeTopPosition();
}
// Test
if (scrollY >= 4.5 * height && scrollY <= 5 * height) {
handleTestTranslateY();
}
if (scrollY > 5 * height && scrollY <= 6 * height) {
handlePage3TopPosition();
}
if (scrollY >= 6.3 * height && scrollY <= 7 * height) {
handlePage3TestTranslateY();
}
if (scrollY >= 7.3 * height && scrollY <= 8.3 * height) {
handlePage4TopPosition();
}
}
});
}, []);
return (
<div
className=" flex-col bg-white relative w-full rtl hidden lg:flex"
style={{ height: "950vh" }}
>
{/* <Dots /> */}
<Page1 page={1} />
<Page2 page={2} />
<VideoTube page={3} />
<Page3 page={4} />
<Page4 page={5} />
</div>
);
}
export default connect(() => ({}), {
handlePage1TopPosition: scrollAction.handlePage1TopPosition,
handlePage2TopPosition: scrollAction.handlePage2TopPosition,
handlePage2RotateX: scrollAction.handlePage2RotateX,
handlePage2BoxPosition: scrollAction.handlePage2BoxPosition,
handlePage2MobilePosition: scrollAction.handlePage2MobilePosition,
handlePage2VideoPosition: scrollAction.handlePage2VideoPosition,
handlePage2VideoTopPosition: scrollAction.handlePage2VideoTopPosition,
handlePage2MobileUnit: scrollAction.handlePage2MobileUnit,
handleVideoTubeTopPosition: scrollAction.handleVideoTubeTopPosition,
handleTestTranslateY: scrollAction.handleTestTranslateY,
floatMouseToggle: scrollAction.floatMouseToggle,
handlePage3TopPosition: scrollAction.handlePage3TopPosition,
handlePage3TestTranslateY: scrollAction.handlePage3TestTranslateY,
handlePage4TopPosition: scrollAction.handlePage4TopPosition,
})(Home);