From f8d203dd2deee8b7fffd581d5dcd12fa77ef1696 Mon Sep 17 00:00:00 2001 From: Reza_ashrafi Date: Fri, 19 Nov 2021 17:28:09 +0330 Subject: [PATCH] reza created second page --- src/App.scss | 2 + src/assets/images/woody-background.svg | 8 ++++ src/utils/scroll.js | 24 ++++++------ src/views/Home/Page1/Book/index.js | 2 +- src/views/Home/Page1/index.js | 3 +- src/views/Home/Page2/index.js | 51 ++++++++++++++++++++------ src/views/Home/Page2/index.scss | 3 ++ src/views/Home/index.js | 4 +- 8 files changed, 69 insertions(+), 28 deletions(-) create mode 100644 src/assets/images/woody-background.svg create mode 100644 src/views/Home/Page2/index.scss diff --git a/src/App.scss b/src/App.scss index 254ee0d..9d42a01 100644 --- a/src/App.scss +++ b/src/App.scss @@ -1,5 +1,7 @@ @import "./constants/size.scss"; @import "./views/Home/Page1/index.scss"; +@import "./views/Home/Page2/index.scss"; + .App { direction: rtl; diff --git a/src/assets/images/woody-background.svg b/src/assets/images/woody-background.svg new file mode 100644 index 0000000..4563ebf --- /dev/null +++ b/src/assets/images/woody-background.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/utils/scroll.js b/src/utils/scroll.js index f6ba647..4aa40f8 100644 --- a/src/utils/scroll.js +++ b/src/utils/scroll.js @@ -3,16 +3,16 @@ class scroll { const height = Number(window.innerHeight); const scrollY = Number(window.scrollY); if (index === 1) { - if (scrollY === 0) { - return 0; - } - if(scrollY > 0 && scrollY < height) { - return -scrollY; - } - if(scrollY === height){ - // return '-1' + height; - alert('kir'); - } + 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) { if (scrollY === 0) { @@ -29,10 +29,10 @@ class scroll { if (scrollY <= height) { return height; } - if (scrollY > height && scrollY < 2 * height) { + if (scrollY > height && scrollY < 3 * height) { return 2 * height - scrollY; } - if(scrollY === 3 * height){ + if(scrollY === 4 * height){ return -height; } }else diff --git a/src/views/Home/Page1/Book/index.js b/src/views/Home/Page1/Book/index.js index 770b40c..f41dd70 100644 --- a/src/views/Home/Page1/Book/index.js +++ b/src/views/Home/Page1/Book/index.js @@ -5,7 +5,7 @@ import { Link } from "react-router-dom"; export default function Book({ book }) { return ( - {book.name} + {book.name} diff --git a/src/views/Home/Page1/index.js b/src/views/Home/Page1/index.js index d80d370..53341f3 100644 --- a/src/views/Home/Page1/index.js +++ b/src/views/Home/Page1/index.js @@ -63,7 +63,6 @@ export default function Page1({ list, page }) { className="absolute transform left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
-
- ورود به فروشگاه + ورود به فروشگاه
diff --git a/src/views/Home/Page2/index.js b/src/views/Home/Page2/index.js index 0ccd0c8..8a0cf2d 100644 --- a/src/views/Home/Page2/index.js +++ b/src/views/Home/Page2/index.js @@ -2,27 +2,56 @@ import React, { useState, useEffect } from "react"; import _ from "lodash"; import scroll from "../../../utils/scroll"; - export default function Page2({ list, page }) { const [top, setTop] = useState(window.innerHeight); - - useEffect(() => { + const [boxPosition, setBoxPosition] = useState({ + translateX : -12, + translateY : 5, + rotate : 5, + }); + useEffect(() => { window.addEventListener("scroll", (e) => { setTop(scroll.homeScrollHandler(page)); + boxPositionHandler(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) { + 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), + }); + }else{ + setBoxPosition({ + translateY : 12, + translateX : 15, + rotate : 0, + }); + } + + }; return (
- +
); } - diff --git a/src/views/Home/Page2/index.scss b/src/views/Home/Page2/index.scss new file mode 100644 index 0000000..1609632 --- /dev/null +++ b/src/views/Home/Page2/index.scss @@ -0,0 +1,3 @@ +.home-page2{ + background-image: url(../../../assets/images/woody-background.svg); +} \ No newline at end of file diff --git a/src/views/Home/index.js b/src/views/Home/index.js index c276775..a84604b 100644 --- a/src/views/Home/index.js +++ b/src/views/Home/index.js @@ -20,8 +20,8 @@ export default function Home() { - - + {/* */} + {/* */}