reza find box formula

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;

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 (
     <div
@@ -47,11 +62,17 @@ export default function Page2({ list, page }) {
     >
       <div
         className={_.join(
-          ["relative w-full h-full bg-blue-500 shadow-2xl transform"],
+          [
+            "relative w-full h-full shadow-2xl transform d-flex justify-center bg-white items-center text-center",
+          ],
           " "
         )}
-        style={{ transform: `translateX(${boxPosition.translateX}%) rotate(${boxPosition.rotate}deg) translateY(${boxPosition.translateY}%)` }}
-      ></div>
+        style={{
+          transform: `translateX(${boxPosition.translateX}%) rotate(${boxPosition.rotate}deg) translateY(${boxPosition.translateY}%)`,
+        }}
+      >
+        <div className="absolute left-4 top-4 h-40 w-40 bg-red-500"></div>
+      </div>
     </div>
   );
 }

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

src/views/Home/index.js

@@ -22,9 +22,9 @@ export default function Home() {
       <Page2 page={2} />
       {/* <Page3 page={3} /> */}
       {/* <Page4 page={4} /> */}
-      <Page5 page={5} />
-      <Page6 page={6} />
-      <Page7 page={7} /> 
+      {/* <Page5 page={5} /> */}
+      {/* <Page6 page={6} /> */}
+      {/* <Page7 page={7} />  */}
     </div>
   );
 }