From bbad8b0b9a381fea888b10cb2354bf628bd49a44 Mon Sep 17 00:00:00 2001 From: Reza_ashrafi Date: Sat, 20 Nov 2021 18:30:36 +0330 Subject: [PATCH] reza find box formula --- src/assets/images/home-page2.svg | 5 +++ src/utils/scroll.js | 48 ++++++++++++----------- src/views/Home/Page2/index.js | 67 +++++++++++++++++++++----------- src/views/Home/Page2/index.scss | 2 + src/views/Home/index.js | 6 +-- 5 files changed, 79 insertions(+), 49 deletions(-) create mode 100644 src/assets/images/home-page2.svg diff --git a/src/assets/images/home-page2.svg b/src/assets/images/home-page2.svg new file mode 100644 index 0000000..02cab95 --- /dev/null +++ b/src/assets/images/home-page2.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/utils/scroll.js b/src/utils/scroll.js index 4aa40f8..e91e249 100644 --- a/src/utils/scroll.js +++ b/src/utils/scroll.js @@ -3,39 +3,41 @@ class scroll { const height = Number(window.innerHeight); const scrollY = Number(window.scrollY); if (index === 1) { - return 0; - // if (scrollY === 0) { - // return 0; - // } - // if(scrollY > 0 && scrollY < 2 * height) { - // return -scrollY; - // } - // if(scrollY === 2 * height){ - // return -height; - // } - }else - if (index === 2) { + // return 0; if (scrollY === 0) { - return height; + return 0; } - if (scrollY > 0 && scrollY < height) { - return height - scrollY; + if(scrollY > 0 && scrollY < 2 * height) { + return -scrollY; } if(scrollY === 2 * height){ - return -1 * height; + return -height; } }else - if (index === 3) { - if (scrollY <= height) { + if (index === 2) { + if (scrollY === 0) { return height; } - if (scrollY > height && scrollY < 3 * height) { - return 2 * height - scrollY; + if (scrollY > 0 && scrollY < height) { + return height - scrollY; } - if(scrollY === 4 * height){ - return -height; + if(scrollY === 3 * height){ + return -1 * height; } - }else + } + // else + // if (index === 3) { + // if (scrollY <= height) { + // return height; + // } + // if (scrollY > height && scrollY < 3 * height) { + // return 2 * height - scrollY; + // } + // if(scrollY === 4 * height){ + // return -height; + // } + // } + else if (index === 4) { if (scrollY <= 2 * height) { return height; diff --git a/src/views/Home/Page2/index.js b/src/views/Home/Page2/index.js index 8a0cf2d..c01023c 100644 --- a/src/views/Home/Page2/index.js +++ b/src/views/Home/Page2/index.js @@ -3,42 +3,57 @@ import _ from "lodash"; import scroll from "../../../utils/scroll"; export default function Page2({ list, page }) { + const height = window.innerHeight; const [top, setTop] = useState(window.innerHeight); const [boxPosition, setBoxPosition] = useState({ - translateX : -12, - translateY : 5, - rotate : 5, + translateY: null, + translateX: null, + rotate: null, }); useEffect(() => { + setBoxPosition({ + translateY: boxPositionFormula(window.scrollY, 5, 7, "increase"), + translateX: boxPositionFormula(window.scrollY, 5, 7, "increase"), + rotate: boxPositionFormula(window.scrollY, 5, 10, "decrease"), + }); window.addEventListener("scroll", (e) => { setTop(scroll.homeScrollHandler(page)); boxPositionHandler(window.scrollY); + mobilePositionHandler(window.scrollY); }); }, []); - const height = window.innerHeight; const boxPositionHandler = (scrollY) => { - if(scrollY <= height){ - setBoxPosition({ - translateY : 5, - translateX : -12, - rotate : 5, - }); - } - else if (scrollY > height && scrollY <= 2 * height) { + if (scrollY <= height) { setBoxPosition({ - translateY : (-9 + (scrollY + height) / 154) > 12 ? 12 : (-9 + (scrollY + height) / 154), - translateX : (-66 + (scrollY + height) / 40) > 15 ? 15 : (-66 + (scrollY + height) / 40), - rotate : (-((scrollY + height) / 214) + 15) < 0 ? 0 : (-((scrollY + height) / 214) + 15), + translateY: 5, + translateX: -12, + rotate: 5, }); - }else{ + } else if (scrollY > height && scrollY <= 2 * height) { setBoxPosition({ - translateY : 12, - translateX : 15, - rotate : 0, + ...boxPosition, + translateY: boxPositionFormula(scrollY, 5, 7, "increase"), + translateX: boxPositionFormula(scrollY, -12, 1.5, "increase"), + rotate: boxPositionFormula(scrollY, 5, 10, "decrease"), }); + } else { + // setBoxPosition({ + // translateY: 12, + // translateX: 15, + // rotate: 0, + // }); + } + }; + + const mobilePositionHandler = (scrollY) => {}; + + const boxPositionFormula = (scrollY, first, speed, direction) => { + if (direction === "increase") { + return first + (((scrollY - height) / scrollY) * 100) / speed; + } else { + return first - (((scrollY - height) / scrollY) * 100) / speed; } - }; return (
+ style={{ + transform: `translateX(${boxPosition.translateX}%) rotate(${boxPosition.rotate}deg) translateY(${boxPosition.translateY}%)`, + }} + > +
+
); } diff --git a/src/views/Home/Page2/index.scss b/src/views/Home/Page2/index.scss index 1609632..0129d23 100644 --- a/src/views/Home/Page2/index.scss +++ b/src/views/Home/Page2/index.scss @@ -1,3 +1,5 @@ .home-page2{ background-image: url(../../../assets/images/woody-background.svg); + background-repeat: no-repeat; + background-size: cover; } \ No newline at end of file diff --git a/src/views/Home/index.js b/src/views/Home/index.js index a84604b..fa003b4 100644 --- a/src/views/Home/index.js +++ b/src/views/Home/index.js @@ -22,9 +22,9 @@ export default function Home() { {/* */} {/* */} - - - + {/* */} + {/* */} + {/* */} ); }