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
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);
|
|
|