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 (
{/* */}
); } 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);