reza added mobile

src/App.scss

@@ -1,6 +1,7 @@
 @import "./constants/size.scss";
 @import "./views/Home/Page1/index.scss";
 @import "./views/Home/Page2/index.scss";
+@import "./views/Home/Page2/Mobile/index";
 
 *{
   font-family: Regular;

src/utils/scroll.js

@@ -91,6 +91,14 @@ class scroll {
     //   }
     // }
   };
+
+  linearFormula = (currentScroll, position1, position2, scroll1, scroll2 ) => {
+    const alpha = (currentScroll - scroll1) / (scroll2 - scroll1);
+    const deltaPosition = position2 - position1;
+    const currectPosition = position1 + deltaPosition * alpha;
+    return currectPosition;
+  }
+
 }
 
 const _scroll = new scroll();

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

@@ -0,0 +1,63 @@
+import React, { useEffect, useState } from "react";
+import _ from 'lodash';
+
+export default function Mobile({ mobilePosition }) {
+  const [checked, setChecked] = useState(mobilePosition > 0 ? true : false);
+  useEffect(() => {
+    if (mobilePosition > 0) {
+      setChecked(true);
+    } else {
+      setChecked(false);
+    }
+  }, [mobilePosition]);
+
+  return (
+    <div
+      className="fixed rounded-2xl flex flex-col overflow-hidden"
+      style={{
+        top: "5%",
+        height: (window.innerHeight * 9) / 10,
+        width: (window.innerHeight * 10) / 20,
+        left: mobilePosition + "%",
+        // transform: `translateX(-${(window.innerHeight * 7) / 40 - 84}px)`,
+      }}
+    >
+      {
+        <div className="relative w-full h-full min-h-full">
+        <div
+          className="absolute left-0 top-0 w-full backdrop-filter backdrop-blur-lg bg-black bg-opacity-40"
+          style={{ height: "10%" }}
+        ></div>
+        <div
+          className="absolute left-0 top-40 backdrop-filter backdrop-blur-lg bg-black bg-opacity-40"
+          style={{
+            top: "10%",
+            height: "28%",
+            width: "25%",
+          }}
+        ></div>
+        <div
+          className="absolute right-0 top-40 backdrop-filter backdrop-blur-lg bg-black bg-opacity-40"
+          style={{
+            top: "10%",
+            height: "28%",
+            width: "25%",
+          }}
+        ></div>
+        <div
+          className="absolute left-0 bottom-0 w-full backdrop-filter backdrop-blur-lg bg-black bg-opacity-40"
+          style={{ height: "62%" }}
+        ></div>
+        <div
+          className="scanner absolute bg-green-300"
+          style={{ height: 5, width: "50%", left: "25%", top: "10%" }}
+        ></div>
+      </div>
+      }
+      {
+         <div className={_.join(["relative w-full h-full min-h-full bg-green-200 transition-all transform", checked ? '-translate-y-full' : ''], " ")}></div>
+      }
+      
+    </div>
+  );
+}

src/views/Home/Page2/Mobile/index.scss

@@ -0,0 +1,18 @@
+.scanner{
+  animation-name : scanner;
+  animation-iteration-count: infinite;
+  animation-duration: 1.8s;
+  animation-timing-function: ease;
+}
+
+@keyframes scanner {
+  0% {
+    top : 10%;
+  }
+  50%{
+    top : 38%;
+  }
+  100%{
+    top : 10%;
+  }
+}

src/views/Home/Page2/index.js

@@ -1,6 +1,8 @@
 import React, { useState, useEffect } from "react";
 import _ from "lodash";
 import scroll from "../../../utils/scroll";
+import Mobile from './Mobile';
+import qrImage from '../../../assets/images/qrImage.png';
 
 export default function Page2({ list, page }) {
   const height = window.innerHeight;
@@ -13,33 +15,65 @@ export default function Page2({ list, page }) {
   const [mobilePosition, setMobilePosition] = useState(null);
   useEffect(() => {
     setMobilePosition(
-      boxPositionFormula(
+      scroll.linearFormula(
         window.scrollY > 3 * height ? 3 * height : window.scrollY,
-        -(window.innerHeight * 7) / 20,
+        -(((window.innerHeight * 10) / 20 / window.innerWidth) * 100),
-        1.37,
+        6,
-        "increase"
+        2 * height,
+        3 * height
       )
     );
-    setBoxPosition({
+    if (window.scrollY < 2.5 * height) {
-      translateY: boxPositionFormula(
+      setBoxPosition({
-        window.scrollY > 2 * height ? 2 * height : window.scrollY,
+        translateY: scroll.linearFormula(
-        5,
+          window.scrollY > 2 * height ? 2 * height : window.scrollY,
-        7,
+          -5,
-        "increase"
+          10,
-      ),
+          height,
-      translateX: boxPositionFormula(
+          2 * height
-        window.scrollY > 2 * height ? 2 * height : window.scrollY,
+        ),
-        -12,
+        translateX: scroll.linearFormula(
-        1.5,
+          window.scrollY > 2 * height ? 2 * height : window.scrollY,
-        "increase"
+          -5,
-      ),
+          32,
-      rotate: boxPositionFormula(
+          height,
-        window.scrollY > 2 * height ? 2 * height : window.scrollY,
+          2 * height
-        5,
+        ),
-        10,
+        rotate: scroll.linearFormula(
-        "decrease"
+          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) => {
       setTop(scroll.homeScrollHandler(page));
       boxPositionHandler(window.scrollY);
@@ -50,56 +84,66 @@ export default function Page2({ list, page }) {
   const boxPositionHandler = (scrollY) => {
     if (scrollY <= height) {
       setBoxPosition({
-        translateY: 5,
+        translateY: -5,
-        translateX: -15,
+        translateX: -5,
         rotate: 5,
       });
-    } else if (scrollY > height && scrollY <= 2 * height) {
+    }
+    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: boxPositionFormula(scrollY, 5, 7, "increase"),
+        translateY: scroll.linearFormula(
-        translateX: boxPositionFormula(scrollY, -12, 1.5, "increase"),
+          scrollY,
-        rotate: boxPositionFormula(scrollY, 5, 10, "decrease"),
+          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 {
-      // setBoxPosition({
-      //   translateY: 12,
-      //   translateX: 15,
-      //   rotate: 0,
-      // });
     }
   };
 
   const mobilePositionHandler = (scrollY) => {
     if (scrollY <= 2 * height) {
-      setMobilePosition(-70);
-    } else if (scrollY > 2 * height && scrollY <= 3 * height) {
       setMobilePosition(
-        boxPositionFormula(
+        -(((window.innerHeight * 10) / 20 / window.innerWidth) * 100)
-          scrollY - height,
+      );
-          (-(window.innerHeight * 7) / 20 / window.innerWidth) * 100,
+    } else if (scrollY > 2 * height && scrollY <= 2.5 * height) {
-          1.3,
+      setMobilePosition(
-          "increase"
+        scroll.linearFormula(
+          scrollY,
+          -(((window.innerHeight * 10) / 20 / window.innerWidth) * 100),
+          6,
+          2 * height,
+          2.5 * height
         )
       );
     }
   };
 
-  const boxPositionFormula = (scrollY, first, speed, direction) => {
-    console.log(scrollY);
-    if (direction === "increase") {
-      return first + (((scrollY - height) / scrollY) * 100) / speed;
-    } else {
-      return first - (((scrollY - height) / scrollY) * 100) / speed;
-    }
-  };
-
-  // const mobilePositionFormula = (scrollY) => {
-  //   return - + ((scrollY - 2 * height) / height * 100);
-  // };
   return (
     <div
-      className={_.join(["home-page2 h-screen w-full fixed left-0 origin-top"], " ")}
+      className={_.join(
+        ["home-page2 h-screen w-full fixed left-0 origin-top overflow-hidden"],
+        " "
+      )}
       style={{
         top: top,
         transform: `rotateX(${
@@ -114,29 +158,20 @@ export default function Page2({ list, page }) {
       <div
         className={_.join(
           [
-            "relative w-full h-full shadow-2xl transform d-flex justify-center bg-white items-center text-center",
+            "relative 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}%)`,
+          width: "140%",
+          height: "140%",
         }}
       >
-        <div className="absolute left-4 top-4 h-40 w-40 bg-red-500"></div>
+        <div className="absolute left-8 top-8 h-40 w-40"><img src={qrImage} alt="" /></div>
       </div>
       {/* mobile phone */}
-      <div
+      <Mobile mobilePosition={mobilePosition} />
-        className="fixed border"
-        style={{
-          top: "10%",
-          height: (window.innerHeight * 7) / 10,
-          width: (window.innerHeight * 7) / 20,
-          left: mobilePosition + "%",
-          // transform: `translateX(-${(window.innerHeight * 7) / 40 - 84}px)`,
-        }}
-      >
-        {mobilePosition}
-      </div>
     </div>
   );
 }