reza optimized app

src/components/FloatWidthMouse/index.js

@@ -1,16 +1,22 @@
 import React, { useState, useEffect } from "react";
+import { connect } from "react-redux";
 
-export default function FloatWithMouse() {
+function FloatWithMouse({ floatMouseToggle }) {
   const [left, setLeft] = useState(null);
   const [top, setTop] = useState(null);
 
   useEffect(() => {
     window.addEventListener("mousemove", (e) => {
+      if (floatMouseToggle) {
         setLeft(e.pageX);
         setTop(e.pageY);
+      }
     });
   });
+
   return (
+    <>
+      {floatMouseToggle && (
         <div
           className="absolute rounded-full transition-a;; duration-1000 ease-out"
           style={{
@@ -22,5 +28,13 @@ export default function FloatWithMouse() {
               "radial-gradient(circle, hsla(230, 100%, 87%, 1) 0%, hsla(230, 100%, 87%, 1) 0%, hsla(0, 0%, 100%, 0) 55%)",
           }}
         ></div>
+      )}
+    </>
   );
 }
+
+const mapStateToProps = (state) => ({
+  floatMouseToggle: state.scrollAction.floatMouseToggle,
+});
+
+export default connect(mapStateToProps, {})(FloatWithMouse);

src/redux/actions/index.js

@@ -9,6 +9,7 @@ export { default as userProduct } from "./userProduct";
 export { default as content } from "./content";
 export { default as faq } from "./faq";
 export { default as file } from "./file";
+export {default as scrollAction} from "./scroll";
 
 
 

src/redux/actions/scroll.js

@@ -0,0 +1,74 @@
+const scrollAction = {
+  floatMouseToggle:
+    (data = null) =>
+    async (dispatch) => {
+      await dispatch({ type: "scroll/page1/floatMouse", data });
+    },
+  handlePage1TopPosition:
+    (data = null) =>
+    async (dispatch) => {
+      await dispatch({ type: "scroll/page1/top", data });
+    },
+  handlePage2TopPosition:
+    (data = null) =>
+    async (dispatch) => {
+      await dispatch({ type: "scroll/page2/top", data });
+    },
+  handlePage2RotateX:
+    (data = window.scrollY) =>
+    async (dispatch) => {
+      await dispatch({ type: "scroll/page2/rotateX", data });
+    },
+  handlePage2BoxPosition:
+    (data = window.scrollY) =>
+    async (dispatch) => {
+      await dispatch({ type: "scroll/page2/boxPosition", data });
+    },
+  handlePage2MobilePosition:
+    (data = window.scrollY) =>
+    async (dispatch) => {
+      await dispatch({ type: "scroll/page2/mobilePosition", data });
+    },
+  handlePage2VideoPosition:
+    (data = window.scrollY) =>
+    async (dispatch) => {
+      await dispatch({ type: "scroll/page2/videoPosition", data });
+    },
+  handlePage2VideoTopPosition:
+    (data = window.scrollY) =>
+    async (dispatch) => {
+      await dispatch({ type: "scroll/page2/videoTopPosition", data });
+    },
+  handlePage2MobileUnit:
+    (data = window.scrollY) =>
+    async (dispatch) => {
+      await dispatch({ type: "scroll/page2/mobileUnit", data });
+    },
+  handleVideoTubeTopPosition:
+    (data = window.scrollY) =>
+    async (dispatch) => {
+      await dispatch({ type: "scroll/videoTube/top", data });
+    },
+  handleTestTranslateY:
+    (data = window.scrollY) =>
+    async (dispatch) => {
+      await dispatch({ type: "scroll/test/translateY", data });
+    },
+  handlePage3TopPosition:
+    (data = window.scrollY) =>
+    async (dispatch) => {
+      await dispatch({ type: "scroll/page3/top", data });
+    },
+  handlePage3TestTranslateY:
+    (data = window.scrollY) =>
+    async (dispatch) => {
+      await dispatch({ type: "scroll/page3/testTranslateY", data });
+    },
+  handlePage4TopPosition:
+    (data = window.scrollY) =>
+    async (dispatch) => {
+      await dispatch({ type: "scroll/page4/top", data });
+    },
+};
+
+export default scrollAction;

src/redux/reducers/index.js

@@ -8,6 +8,7 @@ export { default as faq } from "./faq";
 export { default as file } from "./file";
 export { default as userFactor } from "./userFactor";
 export { default as userProduct } from "./userProduct";
+export {default as scrollAction} from "./scroll";
 
 
 

src/redux/reducers/scroll.js

@@ -0,0 +1,161 @@
+import scroll from "../../utils/scroll";
+const height = window.innerHeight;
+const width = window.innerWidth;
+const prevScroll = localStorage.getItem("prevScroll");
+
+const initialState = {
+  page1TopPosition: scroll.homeScrollHandler(1),
+  page2TopPosition: scroll.homeScrollHandler(2),
+  page2RotateX: scroll.linearFormula(
+    scroll.linearFormula(
+      prevScroll > height ? height : prevScroll,
+      45,
+      0,
+      0,
+      height
+    )
+  ),
+  page2BoxPosition: scroll.initializeBoxPosition(prevScroll),
+  page2MobilePosition: scroll.linearFormula(
+    prevScroll > 2.5 * height ? 2.5 * height : prevScroll,
+    -(((height * 10) / 20 / width) * 100),
+    6,
+    2 * height,
+    2.5 * height
+  ),
+  page2VideoPosition:
+    prevScroll > 4 * height
+      ? scroll.videoLinearFormula(4 * height)
+      : scroll.videoLinearFormula(prevScroll),
+  page2VideoTopPosition:
+    prevScroll > 3 * height
+      ? scroll.linearFormula(3 * height, 70, 50, 2.8 * height, 3 * height)
+      : scroll.linearFormula(prevScroll, 70, 50, 2.8 * height, 3 * height),
+  page2MobileUnit: scroll.initializeMobileUnit(prevScroll),
+  videoTubeTopPosition: scroll.homeScrollHandler(3),
+  testTranslateY: scroll.linearFormula(
+    prevScroll > 5 * window.innerHeight ? 5 * window.innerHeight : prevScroll,
+    0,
+    -101,
+    4.5 * height,
+    5 * height
+  ),
+  page3TopPosition: scroll.homeScrollHandler(4),
+  page3TestTranslateY:
+    prevScroll < 6.3 * height
+      ? 0
+      : scroll.linearFormula(
+          prevScroll > 7 * height ? 7 * height : prevScroll,
+          0,
+          100,
+          6.3 * height,
+          7 * height
+        ),
+  page4TopPosition: scroll.homeScrollHandler(5),
+};
+
+export default function scrollAction(state = initialState, action) {
+  let { type, data } = action;
+  switch (type) {
+    case "scroll/page1/floatMouse":
+      return { ...state, floatMouseToggle: data };
+    case "scroll/page1/top":
+      return { ...state, page1TopPosition: scroll.homeScrollHandler(1) };
+    case "scroll/page2/top":
+      return { ...state, page2TopPosition: scroll.homeScrollHandler(2) };
+    case "scroll/page2/rotateX":
+      return {
+        ...state,
+        page2RotateX: scroll.linearFormula(window.scrollY, 45, 0, 0, height),
+      };
+    case "scroll/page2/boxPosition":
+      return {
+        ...state,
+        page2BoxPosition: {
+          translateY: scroll.linearFormula(
+            data.scrollY,
+            data.translateY.pos1,
+            data.translateY.pos2,
+            data.start,
+            data.end
+          ),
+          translateX: scroll.linearFormula(
+            data.scrollY,
+            data.translateX.pos1,
+            data.translateX.pos2,
+            data.start,
+            data.end
+          ),
+          rotate: scroll.linearFormula(
+            data.scrollY,
+            data.rotate.pos1,
+            data.rotate.pos2,
+            data.start,
+            data.end
+          ),
+        },
+      };
+    case "scroll/page2/mobilePosition":
+      return {
+        ...state,
+        page2MobilePosition: scroll.linearFormula(
+          window.scrollY,
+          -(((height * 10) / 20 / width) * 100),
+          6,
+          2 * height,
+          2.5 * height
+        ),
+      };
+    case "scroll/page2/videoPosition":
+      return {
+        ...state,
+        page2VideoPosition: scroll.videoLinearFormula(window.scrollY),
+      };
+    case "scroll/page2/videoTopPosition":
+      return {
+        ...state,
+        page2VideoTopPosition: scroll.linearFormula(
+          window.scrollY,
+          70,
+          50,
+          2.8 * height,
+          3 * height
+        ),
+      };
+    case "scroll/page2/mobileUnit":
+      return {
+        ...state,
+        page2MobileUnit: scroll.initializeMobileUnit(window.scrollY),
+      };
+    case "scroll/videoTube/top":
+      return { ...state, videoTubeTopPosition: scroll.homeScrollHandler(3) };
+    case "scroll/test/translateY":
+      return {
+        ...state,
+        testTranslateY: scroll.linearFormula(
+          window.scrollY,
+          0,
+          -101,
+          4.5 * height,
+          5 * height
+        ),
+      };
+    case "scroll/page3/top":
+      return { ...state, page3TopPosition: scroll.homeScrollHandler(4) };
+    case "scroll/page3/testTranslateY":
+      return {
+        ...state,
+        page3TestTranslateY: scroll.linearFormula(
+          window.scrollY,
+          0,
+          100,
+          6.3 * height,
+          7 * height
+        ),
+      };
+    case "scroll/page4/top":
+      return { ...state, page4TopPosition: scroll.homeScrollHandler(5) };
+    default:
+      return state;
+  }
+}

src/utils/scroll.js

@@ -4,55 +4,55 @@ class scroll {
   };
 
   homeScrollHandler = (index) => {
+    const prevScroll = Number(localStorage.getItem('prevScroll'));
     const height = Number(window.innerHeight);
     const scrollY = Number(window.scrollY);
     if (index === 1) {
-      // return 0;
-      if (scrollY === 0) {
+      if (prevScroll === 0) {
         return 0;
+      }else
+      if (prevScroll > 0 && prevScroll <= height) {
+        return -prevScroll;
       }
-      if (scrollY > 0 && scrollY < 7 * height) {
-        return -scrollY;
-      }
-      if (scrollY === 7 * height) {
+      if (prevScroll > height) {
         return -height;
       }
     } else if (index === 2) {
-      if (scrollY === 0) {
+      if (prevScroll === 0) {
         return height;
       }
-      if (scrollY > 0 && scrollY < height) {
-        return height - scrollY;
+      if (prevScroll > 0 && prevScroll <= height) {
+        return height - prevScroll;
       }
-      if (scrollY >= 10 * height) {
+      if (prevScroll > 10 * height) {
         return -1 * height;
       }
     } else if (index === 3) {
-      if (scrollY <= 3 * height) {
+      if (prevScroll <= 3.5 * height) {
         return height;
       }
-      if (scrollY > 3 * height && scrollY < 4 * height) {
-        return 4 * height - scrollY;
+      if (prevScroll > 3.5 * height && prevScroll <= 4 * height) {
+        return 4 * height - prevScroll;
       }
-      if (scrollY === 10 * height) {
+      if (prevScroll > 10 * height) {
         return -height;
       }
     } else if (index === 4) {
-      if (scrollY <= 5 * height) {
+      if (prevScroll <= 5 * height) {
         return height;
-      } else if (scrollY > 5 * height && scrollY < 6 * height) {
-        return 6 * height - scrollY;
+      } else if (prevScroll > 5 * height && prevScroll < 6 * height) {
+        return 6 * height - prevScroll;
       }
-      if (scrollY === 10 * height) {
+      if (prevScroll === 10 * height) {
         return -height;
       }
     } else if (index === 5) {
-      if (scrollY <= 7.3 * height) {
+      if (prevScroll <= 7.3 * height) {
         return height;
-      } else if (scrollY > 7.3 * height && scrollY < 8.3 * height) {
-        return 8.3 * height - scrollY;
+      } else if (prevScroll > 7.3 * height && prevScroll < 8.3 * height) {
+        return 8.3 * height - prevScroll;
       }
-      if (scrollY === 10 * height) {
+      if (prevScroll === 10 * height) {
         return -height;
       }
     }
@@ -153,6 +153,59 @@ class scroll {
       left: currentLeft,
     };
   };
+
+  initializeBoxPosition = (currentScroll) => {
+    const height= window.innerHeight;
+    if(currentScroll < height){
+      console.log(currentScroll);
+      return {
+        translateX: -5, 
+        translateY: -5,
+        rotate: 5
+      }
+    }
+    if(currentScroll > height && currentScroll < 2 * height){
+      return {
+        translateX: this.linearFormula(currentScroll, -5, 32, height, 2 * height), 
+        translateY: this.linearFormula(currentScroll, -5, 10, height, 2 * height),
+        rotate: this.linearFormula(currentScroll, 5, 0, height, 2 * height)
+      }
+    }
+    if(currentScroll > 2 * height && currentScroll <= 2.5 * height){
+      return {
+        translateX: 32,
+        translateY: 10,
+        rotate: 0
+      }
+    }
+    if(currentScroll > 2.5 * height && currentScroll <= 3 * height){
+      return {
+        translateX: this.linearFormula(currentScroll, 32, 32, 2.5 * height, 3 * height), 
+        translateY: this.linearFormula(currentScroll, 10, -30, 2.5 * height, 3 * height),
+        rotate: this.linearFormula(currentScroll, 0, 0, 2.5 * height, 3 * height)
+      }
+    }
+    if(currentScroll > 3 * height){
+      return {
+        translateX: 32,
+        translateY: -30,
+        rotate: 0
+      }
+    }
+  };
+
+  initializeMobileUnit = (currentScroll) => {
+    const height = window.innerHeight;
+    if (currentScroll > 2 * height && currentScroll <= 2.3 * height) {
+      return 1;
+    } else if (currentScroll > 2.3 * height && currentScroll <= 2.7 * height) {
+      return 2;
+    } else if (currentScroll > 2.7 * height && currentScroll <= 2.8 * height) {
+      return 3;
+    } else if (currentScroll > 2.8 * height && currentScroll < 3.5 * height) {
+      return 4;
+    }
+  }
 }
 
 const _scroll = new scroll();

src/views/Home/Landscape/Page1/index.js

@@ -1,10 +1,10 @@
 import React, { useState, useEffect } from "react";
+import { connect } from "react-redux";
 import { Link } from "react-router-dom";
 import { Carousel } from "@trendyol-js/react-carousel";
 import Book from "./Book";
 import FloatWithMouse from "../../../../components/FloatWidthMouse";
 import Lights from "./Lights";
-import scroll from "../../../../utils/scroll";
 
 import _ from "lodash";
 
@@ -20,10 +20,9 @@ import arrowBottomIcon from "../../../../assets/icons/arrows-bottom-blue.svg";
 import sheffImage from "../../../../assets/images/sheff.svg";
 import arrowLeftWhite from "../../../../assets/icons/arrow-left-white.svg";
 
-export default function Page1({ list, page }) {
+function Page1({ list, top }) {
   const height = window.innerHeight;
   const [show, setShow] = useState(null);
-  const [top, setTop] = useState(0);
 
   useEffect(() => {
     const width = window.innerWidth;
@@ -42,11 +41,6 @@ export default function Page1({ list, page }) {
     } else if (width > 1024) {
       setShow(4);
     }
-    window.addEventListener("scroll", (e) => {
-      if (window.scrollY > 0 && window.scrollY < 4 * height) {
-        setTop(() => scroll.homeScrollHandler(page));
-      }
-    });
   }, []);
 
   return (
@@ -152,6 +146,12 @@ export default function Page1({ list, page }) {
   );
 }
 
+const mapStateToProps = (state) => ({
+  top: state.scrollAction.page1TopPosition,
+});
+
+export default connect(mapStateToProps, {})(Page1);
+
 Page1.defaultProps = {
   list: [
     {

src/views/Home/Landscape/Page2/Mobile/Video/index.js

@@ -1,40 +1,10 @@
 import React, { useState, useEffect, useCallback } from "react";
+import {connect} from 'react-redux';
 import _ from "lodash";
 import ARImage from "../../../../../../assets/images/ar.jpg";
 import scroll from "../../../../../../utils/scroll";
 
-export default function Video({ selectedVideo, videoPosition }) {
-  const height = window.innerHeight;
-  const [top, setTop] = useState(null);
-  useEffect(() => {
-    scroll.linearFormula(
-      window.scrollY > 3 * height ? 3 * height : window.scrollY,
-      70,
-      50,
-      2.8 * height,
-      3 * height
-    );
-    window.addEventListener("scroll", () => {
-      const scrollY = window.scrollY;
-      if(scrollY > 0 && scrollY < 3 * height) {
-        videoTopPositionHandler(scrollY);
-
-      }
-    });
-  }, []);
-
-  const videoTopPositionHandler = useCallback((scrollY) => {
-    if (scrollY < 2.8 * height) {
-      setTop(() => 50);
-    } else if (scrollY >= 2.8 * height && scrollY < 3 * height) {
-      setTop(() =>
-        scroll.linearFormula(scrollY, 75, 50, 2.8 * height, 3 * height)
-      );
-    } else {
-      setTop(() => 50);
-    }
-  },[top]);
-  
+function Video({ top, videoPosition }) {  
   return (
     <div className="relative h-full w-full bg-transparent">
       <video
@@ -80,3 +50,10 @@ export default function Video({ selectedVideo, videoPosition }) {
     </div>
   );
 }
+
+const mapStateToProps = (state) => ({
+  videoPosition: state.scrollAction.page2VideoPosition,
+  top : state.scrollAction.page2VideoTopPosition
+})
+
+export default connect(mapStateToProps, {})(Video);

src/views/Home/Landscape/Page2/Mobile/index.js

@@ -6,7 +6,7 @@ import QrScanner from "./QrScanner";
 import AR from "./AR";
 import Video from "./Video";
 
-function Mobile({ mobilePosition, videoPosition, autoPlay, selectedVideo, unit }) {
+function Mobile({ mobilePosition, selectedVideo, unit }) {
   return (
     <div
       className={_.join(
@@ -18,7 +18,6 @@ function Mobile({ mobilePosition, videoPosition, autoPlay, selectedVideo, unit }
         height: (window.innerHeight * 9) / 10,
         width: (window.innerHeight * 10) / 20,
         left: mobilePosition + "%",
-        // transform: `translateX(-${(window.innerHeight * 7) / 40 - 84}px)`,
         border: '4px solid black'
       }}
     >
@@ -65,7 +64,7 @@ function Mobile({ mobilePosition, videoPosition, autoPlay, selectedVideo, unit }
             " "
           )}
         >
-          <Video videoPosition={videoPosition} selectedVideo={selectedVideo} />
+          <Video selectedVideo={selectedVideo} />
         </div>
       </div>
     </div>
@@ -75,6 +74,8 @@ function Mobile({ mobilePosition, videoPosition, autoPlay, selectedVideo, unit }
 export default connect(
   (state) => ({
     selectedVideo: state.publicApi.selectedVideo,
+    mobilePosition: state.scrollAction.page2MobilePosition,
+    unit : state.scrollAction.page2MobileUnit,
   }),
   {}
 )(Mobile);

src/views/Home/Landscape/Page2/index.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useCallback } from "react";
+import { connect } from "react-redux";
 import _ from "lodash";
 import scroll from "../../../../utils/scroll";
 import Mobile from "./Mobile";
@@ -6,232 +7,7 @@ import qrImage from "../../../../assets/images/qrImage.png";
 import rightBg from "../../../../assets/images/page-bg.png";
 import leftBg from "../../../../assets/images/page-bg-1.png";
 
-export default function Page2({ list, page, autoPlay }) {
-  const height = window.innerHeight;
-  const [top, setTop] = useState(window.innerHeight);
-  const [rotateX, setRotateX] = useState(null);
-  const [videoPosition, setVideoPosition] = useState(null);
-  const [unit, setUnit] = useState(null);
-  const [boxPosition, setBoxPosition] = useState({
-    translateY: null,
-    translateX: null,
-    rotate: null,
-  });
-  const [mobilePosition, setMobilePosition] = useState(null);
-  useEffect(() => {
-    setMobilePosition(
-      scroll.linearFormula(
-        window.scrollY > 2.5 * height ? 2.5 * height : window.scrollY,
-        -(((window.innerHeight * 10) / 20 / window.innerWidth) * 100),
-        6,
-        2 * height,
-        2.5 * height
-      )
-    );
-    setRotateX(
-      scroll.linearFormula(
-        window.scrollY > height ? height : window.scrollY,
-        45,
-        0,
-        0,
-        height
-      )
-    );
-
-    if (window.scrollY > 3.5 * height && window.scrollY < 4 * height) {
-      videoPositionHandler(
-        window.scrollY > 4 * height
-          ? scroll.videoLinearFormula(4 * height)
-          : scroll.videoLinearFormula(window.scrollY)
-      );
-    }
-
-    unitPositionHandler(window.scrollY);
-    if (window.scrollY < 2.5 * height) {
-      setBoxPosition({
-        translateY: scroll.linearFormula(
-          window.scrollY > 2 * height ? 2 * height : window.scrollY,
-          -5,
-          10,
-          height,
-          2 * height
-        ),
-        translateX: scroll.linearFormula(
-          window.scrollY > 2 * height ? 2 * height : window.scrollY,
-          -5,
-          32,
-          height,
-          2 * height
-        ),
-        rotate: scroll.linearFormula(
-          window.scrollY > 2 * height ? 2 * height : window.scrollY,
-          5,
-          0,
-          height,
-          2 * height
-        ),
-      });
-    } else if (window.scrollY > 3 * height) {
-      setBoxPosition({
-        ...boxPosition,
-        translateY: scroll.linearFormula(
-          window.scrollY > 2.5 * height ? 2.5 * height : window.scrollY,
-          -30,
-          -30,
-          2.5 * height,
-          3 * height
-        ),
-        translateX: scroll.linearFormula(
-          window.scrollY > 2.5 * height ? 2.5 * height : window.scrollY,
-          32,
-          32,
-          2.5 * height,
-          3 * height
-        ),
-        rotate: scroll.linearFormula(
-          window.scrollY > 2.5 * height ? 2.5 * height : window.scrollY,
-          0,
-          0,
-          2.5 * height,
-          3 * height
-        ),
-      });
-    }
-
-    window.addEventListener("scroll", (e) => {
-      const scrollY = window.scrollY;
-      if (scrollY > 0 && scrollY < 4 * height) {
-        setTop(scroll.homeScrollHandler(page));
-      }
-      if (scrollY > 0 && scrollY < height) {
-        setRotateX(scaleHandler(scrollY));
-      }
-      if (scrollY >  0 && scrollY <= 3 * height) {
-        boxPositionHandler(scrollY);
-      }
-      if (scrollY >= 0 && scrollY <= 2.5 * height) {
-        mobilePositionHandler(scrollY);
-      }
-      if (scrollY > 0 * height && scrollY < 3.5 * height) {
-        unitPositionHandler(scrollY);
-      }
-      if (scrollY > 3.5 * height && scrollY < 4 * height) {
-        videoPositionHandler(scrollY);
-      }
-    });
-  }, []);
-
-  useEffect(() => {
-    if (window.scrollY > 0 * height && window.scrollY < 3.5 * height) {
-      unitPositionHandler(window.scrollY);
-    }
-  }, [mobilePosition]);
-
-  const boxPositionHandler = useCallback(
-    (scrollY) => {
-      if (scrollY <= height) {
-        setBoxPosition({
-          translateY: -5,
-          translateX: -5,
-          rotate: 5,
-        });
-      }
-      if (scrollY > height && scrollY <= 2 * height) {
-        setBoxPosition({
-          ...boxPosition,
-          translateY: scroll.linearFormula(scrollY, -5, 10, height, 2 * height),
-          translateX: scroll.linearFormula(scrollY, -5, 32, height, 2 * height),
-          rotate: scroll.linearFormula(scrollY, 5, 0, height, 2 * height),
-        });
-      }
-      if (scrollY > 2.5 * height && scrollY <= 3 * height) {
-        setBoxPosition({
-          ...boxPosition,
-          translateY: scroll.linearFormula(
-            scrollY,
-            10,
-            -30,
-            2.5 * height,
-            3 * height
-          ),
-          translateX: scroll.linearFormula(
-            scrollY,
-            32,
-            32,
-            2.5 * height,
-            3 * height
-          ),
-          rotate: scroll.linearFormula(scrollY, 0, 0, 2.5 * height, 3 * height),
-        });
-      } else {
-      }
-    },
-    [boxPosition]
-  );
-  const mobilePositionHandler = useCallback(
-    (scrollY) => {
-      if (scrollY <= 2 * height) {
-        setMobilePosition(
-          -(((window.innerHeight * 10) / 20 / window.innerWidth) * 100)
-        );
-      } else if (scrollY > 2 * height && scrollY <= 2.5 * height) {
-        setMobilePosition(
-          scroll.linearFormula(
-            scrollY,
-            -(((window.innerHeight * 10) / 20 / window.innerWidth) * 100),
-            6,
-            2 * height,
-            2.5 * height
-          )
-        );
-      } else {
-        setMobilePosition(6);
-      }
-    },
-    [mobilePosition]
-  );
-  const videoPositionHandler = useCallback(
-    (scrollY) => {
-      if (scrollY <= 3.5 * height) {
-        setVideoPosition(() => null);
-      } else if (scrollY > 3.5 * height && scrollY < 4 * height) {
-        setVideoPosition(scroll.videoLinearFormula(scrollY));
-      } else {
-      }
-    },
-    [videoPosition]
-  );
-  const unitPositionHandler = useCallback(
-    (scrollY) => {
-      if (scrollY > 2 * height && scrollY <= 2.5 * height) {
-        if (mobilePosition > 0) {
-          setUnit(2);
-        } else {
-          setUnit(1);
-        }
-      } else if (scrollY > 2.5 * height && scrollY <= 2.7 * height) {
-        setUnit(2);
-      } else if (scrollY > 2.7 * height && scrollY <= 2.8 * height) {
-        setUnit(3);
-      } else if (scrollY > 2.8 * height && scrollY < 3.5 * height) {
-        setUnit(4);
-      }
-    },
-    [unit]
-  );
-  const scaleHandler = useCallback(
-    (scrollY) => {
-      if (scrollY === 0) {
-        setRotateX(90);
-      } else if (scrollY > 0 && scrollY <= height) {
-        setRotateX(scroll.linearFormula(scrollY, 45, 0, 0, height));
-      } else {
-        setRotateX(0);
-      }
-    },
-    [rotateX]
-  );
-
+function Page2({ top, rotateX, boxPosition }) {
   return (
     <div
       className={_.join(["h-screen w-full fixed left-0 overflow-hidden"], " ")}
@@ -239,9 +15,9 @@ export default function Page2({ list, page, autoPlay }) {
         top: top,
         perspective: "400px",
       }}
+      onClick={(e) => e.stopPropagation()}
     >
       <div
-        onClick={(e) => e.stopPropagation()}
         className={_.join(
           [" home-page2 h-full w-full origin-bottom overflow-hidden"],
           " "
@@ -309,13 +85,19 @@ export default function Page2({ list, page, autoPlay }) {
         </div>
         {/* mobile phone */}
         <Mobile
-          mobilePosition={mobilePosition}
-          videoPosition={videoPosition}
-          autoPlay={autoPlay}
-          unit={unit}
         />
         {/* video */}
       </div>
     </div>
   );
 }
+
+const mapStateToProps = (state) => ({
+  top: state.scrollAction.page2TopPosition,
+  rotateX : state.scrollAction.page2RotateX,
+  boxPosition : state.scrollAction.page2BoxPosition,
+  mobilePosition : state.scrollAction.page2MobilePosition,
+  videoPosition : state.scrollAction.page2VideoPosition
+});
+
+export default connect(mapStateToProps, {})(Page2);

src/views/Home/Landscape/Page3/index.js

@@ -1,58 +1,18 @@
 import React, { useState, useEffect, useCallback } from "react";
+import {connect} from 'react-redux';
 import _ from "lodash";
-import scroll from "../../../../utils/scroll";
 import testResultImage from "../../../../assets/images/test-result.png";
 // import testPageInfoImage from "../../../../assets/images/test-page-info.svg";
 import testPageImage from "../../../../assets/images/test-page.svg";
 import testPageFormulaImage from "../../../../assets/images/test-page-formula.svg";
 
-export default function Page3({ list, page }) {
-  const height = window.innerHeight;
-  const [top, setTop] = useState(window.innerHeight);
-  const [translateX, setTranslateX] = useState(null);
-
-  useEffect(() => {
-    setTop(scroll.homeScrollHandler(page));
-    setTranslateX(
-      scroll.linearFormula(
-        window.scrollY > 7 * height ? 7 * height : window.scrollY,
-        0,
-        100,
-        6.3 * height,
-        7 * height
-      )
-    );
-    window.addEventListener("scroll", (e) => {
-      const scrollY = window.scrollY;
-      if (scrollY <= 6.3 * height) {
-        setTop(scroll.homeScrollHandler(page));
-      }
-      if (scrollY > 6.3 && scrollY < 7 * height) {
-        translateXHandler(window.scrollY);
-      }
-    });
-  }, []);
-
-  const translateXHandler = useCallback(
-    (scrollY) => {
-      if (scrollY < 6.3 * height) {
-        setTranslateX(() => 0);
-      } else if (scrollY >= 6.3 * height && scrollY <= 7 * height) {
-        setTranslateX(() => 
-          scroll.linearFormula(window.scrollY, 0, 100, 6.3 * height, 7 * height)
-        );
-      } else {
-        setTranslateX(() => 100);
-      }
-    },
-    [translateX]
-  );
+function Page3({ top, translateY }) {
   return (
     <div
       className={_.join(
         [
           "fixed left-0 h-screen w-full bg-white transition-opacity duration-1000 flex flex-row justify-center items-end z-30",
-          top > 0 ? "opacity-0" : "opacity-100",
+          top > 50 ? "opacity-0" : "opacity-100",
         ],
         " "
       )}
@@ -77,7 +37,7 @@ export default function Page3({ list, page }) {
         />
         <div
           className="w-full h-full relative z-20 bg-white bg-opacity-10 backdrop-filter backdrop-blur-sm"
-          style={{ transform: `translateY(${-1 * translateX}%)` }}
+          style={{ transform: `translateY(${-1 * translateY}%)` }}
         >
           <img
             src={testResultImage}
@@ -89,3 +49,10 @@ export default function Page3({ list, page }) {
     </div>
   );
 }
+
+const mapStateToProps = (state) => ({
+  top : state.scrollAction.page3TopPosition,
+  translateY : state.scrollAction.page3TestTranslateY
+})
+
+export default connect(mapStateToProps, {})(Page3);

src/views/Home/Landscape/Page4/index.js

@@ -1,27 +1,17 @@
-import React, { useState, useEffect } from "react";
+import {connect} from 'react-redux';
 import _ from "lodash";
 import scroll from "../../../../utils/scroll";
 import bgImage from "../../../../assets/images/page5-bg.svg";
 import bazarImage from "../../../../assets/images/bazar.svg";
 import appStoreImage from "../../../../assets/images/app-store.svg";
 
-export default function Page4({ list, page }) {
-  const [top, setTop] = useState(window.innerHeight);
-
-  useEffect(() => {
-    window.addEventListener("scroll", (e) => {
-      if(window.scrollY > 7 * window.innerHeight) {
-        setTop(() => scroll.homeScrollHandler(page));
-      }
-    });
-  }, []);
-
+function Page4({ top }) {
   return (
     <div
       className={_.join(
         [
           "z-30 fixed left-0 h-screen w-full pt-20 bg-white",
-          top === window.innerHeight ? "opacity-0 pointer-events-none" : "opacity-100",
+          top >= window.innerHeight -50 ? "opacity-0 pointer-events-none" : "opacity-100",
         ],
         " "
       )}
@@ -61,3 +51,9 @@ export default function Page4({ list, page }) {
     </div>
   );
 }
+
+const mapStateToProps = (state) => ({
+  top : state.scrollAction.page4TopPosition
+})
+
+export default connect(mapStateToProps, {})(Page4)

src/views/Home/Landscape/Test/index.js

@@ -1,50 +1,11 @@
 import React, { useEffect, useState, useCallback } from "react";
+import {connect} from 'react-redux';
 import _ from "lodash";
 import timerIcon from "../../../../assets/icons/timer.svg";
 import QuestionBox from "./Question";
 import scroll from "../../../../utils/scroll";
 
-export default function Test({ title, duration, questions }) {
-  const [translateY, setTranslateY] = useState(0);
-  const [testPosition, setTestPosition] = useState(null);
-  useEffect(() => {
-    setTranslateY(() =>
-      scroll.linearFormula(
-        window.scrollY > 5 * window.innerHeight
-          ? 5 * window.innerHeight
-          : window.scrollY,
-        0,
-        -101,
-        4.5 * window.innerHeight,
-        5 * window.innerHeight
-      )
-    );
-    window.addEventListener("scroll", () => {
-      testTransformHandler(window.scrollY);
-      if (window.scrollY > 1000) {
-        localStorage.setItem(
-          "testRect",
-          JSON.stringify(
-            document.getElementById("test").getBoundingClientRect()
-          )
-        );
-      }
-    });
-  }, []);
-
-  const testTransformHandler = useCallback((scrollY) => {
-    const height = window.innerHeight;
-    if (scrollY <= 4.5 * height) {
-      setTranslateY(() => 0);
-      setTestPosition(() => null);
-    } else if (scrollY > 4.5 * height && scrollY < 5 * height) {
-      setTranslateY(() =>
-        scroll.linearFormula(scrollY, 0, -101, 4.5 * height, 5 * height)
-      );
-      setTestPosition(() => null);
-    }
-  },[testPosition, translateY]);
-  
+function Test({ title, duration, questions, translateY }) {
   return (
     <div
       onClick={(e) => e.stopPropagation()}
@@ -53,11 +14,6 @@ export default function Test({ title, duration, questions }) {
       style={{
         minHeight: window.innerHeight - 180,
         transform: `translateY(${translateY}%)`,
-        position: testPosition ? "fixed" : "static",
-        left: testPosition?.left ? testPosition?.left : "auto",
-        top: testPosition?.top ? testPosition?.top : "auto",
-        width: testPosition?.width ? testPosition?.width : "auto",
-        height: testPosition?.height ? testPosition?.height : "auto",
       }}
     >
       <header
@@ -91,6 +47,12 @@ export default function Test({ title, duration, questions }) {
   );
 }
 
+const mapStateToProps = (state) => ({
+  translateY: state.scrollAction.testTranslateY,
+})
+
+export default connect(mapStateToProps, {})(Test);
+
 Test.defaultProps = {
   title: "آزمون شیمی پایه دوازدهم متوسطه",
   duration: "48:29",
@@ -106,3 +68,4 @@ Test.defaultProps = {
     },
   ],
 };
+

src/views/Home/Landscape/VideoTube/index.js

@@ -16,37 +16,21 @@ import { book, publicApi } from "../../../../redux/actions";
 // import Loader from "../../components/Loader";
 
 function VodTube({
+  top,
   autoPlay,
   page,
   selectedVideo,
   info,
-  // bookSection,
-  // loading,
   getInfo,
-  // categories,
-  // setVideoActive,
-  // allBooks,
   theme,
 }) {
-  const [top, setTop] = useState(window.innerHeight);
   const videoListTag = useRef(null);
   useEffect(() => {
-    window.addEventListener("scroll", (e) => {
-      setTop(scroll.homeScrollHandler(page));
-    });
-    // localStorage.setItem("scroll-list", "on");
     getInfo({
       bookId: 8,
     });
   }, []);
 
-  // useEffect(() => {
-  //   if (allBooks && localStorage.getItem("category")) {
-  //     const cat = localStorage.getItem("category")?.split(",");
-  //     bookSection({ bookId: cat[0], categoryId: cat[1] });
-  //   }
-  // }, [allBooks]);
-
   const light = theme === "light";
   return (
     <div
@@ -54,7 +38,7 @@ function VodTube({
       className={_.join(
         [
           "fixed flex flex-row rtl pt-20 lg:px-5 xl:px-10 w-full bg-white dark:bg-black bg-opacity-80 transition-opacity duration-500 min-h-screen backdrop-filter backdrop-blur-md",
-          top > 0 ? "opacity-0 z-0" : "opacity-100 z-10",
+          top > 10 ? "opacity-0 z-0" : "opacity-100 z-10",
         ],
         " "
       )}
@@ -181,6 +165,7 @@ function VodTube({
 
 export default connect(
   (state) => ({
+    top : state.scrollAction.videoTubeTopPosition,
     selectedVideo: state.publicApi.selectedVideo,
     info: state.publicApi?.bookInfo,
     loading: state.publicApi.loading,

src/views/Home/Landscape/index.js

@@ -1,24 +1,42 @@
 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 Dots from '../../../components/Dots';
+import Dots from "../../../components/Dots";
 import VideoTube from "./VideoTube";
 
-export default function Home() {
-  const [autoPlay, setAutoPlay] = useState(false);
+function Home({
+  floatMouseToggle,
+  handlePage1TopPosition,
+  handlePage2TopPosition,
+  handlePage2RotateX,
+  handlePage2BoxPosition,
+  handlePage2MobilePosition,
+  handlePage2VideoPosition,
+  handlePage2VideoTopPosition,
+  handlePage2MobileUnit,
+  handleVideoTubeTopPosition,
+  handleTestTranslateY,
+  handlePage3TopPosition,
+  handlePage3TestTranslateY,
+  handlePage4TopPosition,
+}) {
+  const height = window.innerHeight;
+  const [mouseFlag, setMouseFlag] = useState(true);
+  // initialState
+
   useEffect(() => {
     window.addEventListener("scroll", () => {
-      if (window.scrollY > 3 * window.innerHeight) {
-        setAutoPlay(() => true);
-      } else {
-        setAutoPlay(() => false);
-      }
+      const scrollY = window.scrollY;
+      localStorage.setItem("prevScroll", scrollY);
       if (
         !JSON.parse(localStorage.getItem("joiRect")) &&
-        window.scrollY > 1000
+        window.scrollY > 1000 &&
+        window.scrollY < 2000
       ) {
         localStorage.setItem(
           "joiRect",
@@ -27,19 +45,124 @@ export default function Home() {
           )
         );
       }
+      // 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" }}
+      onScroll={() => console.log(1)}
     >
-      <Dots />
+      {/* <Dots /> */}
       <Page1 page={1} />
-      <Page2 page={2} autoPlay={autoPlay} />
-      <VideoTube page={3} autoPlay={autoPlay} />
+      <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);