reza added some change

src/utils/scroll.js

@@ -6,22 +6,21 @@ class scroll {
       // return 0;
       if (scrollY === 0) {
         return 0;
-      } 
-      if(scrollY > 0 && scrollY < 7 * height) {
+      }
+      if (scrollY > 0 && scrollY < 7 * height) {
         return -scrollY;
-      } 
-      if(scrollY === 7 * height){
-        return  -height;
       }
-    }else
-    if (index === 2) {
+      if (scrollY === 7 * height) {
+        return -height;
+      }
+    } else if (index === 2) {
       if (scrollY === 0) {
         return height;
-      } 
+      }
       if (scrollY > 0 && scrollY < height) {
         return height - scrollY;
-      } 
-      if(scrollY === 7 * height){
+      }
+      if (scrollY === 7 * height) {
         return -1 * height;
       }
     }
@@ -29,52 +28,47 @@ class scroll {
     // 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) {
+    else if (index === 4) {
       if (scrollY <= 2 * height) {
         return height;
       } else if (scrollY > 2 * height && scrollY < 3 * height) {
         return 3 * height - scrollY;
-      } 
-      if(scrollY === 4 * height){
+      }
+      if (scrollY === 4 * height) {
         return -height;
       }
-    }else
-    if (index === 5) {
+    } else if (index === 5) {
       if (scrollY <= 3 * height) {
         return height;
       } else if (scrollY > 3 * height && scrollY < 4 * height) {
         return 4 * height - scrollY;
-      } 
-      if(scrollY === 5 * height){
+      }
+      if (scrollY === 5 * height) {
         return -height;
       }
-    }else
-    if (index === 6) {
+    } else if (index === 6) {
       if (scrollY <= 4 * height) {
         return height;
       } else if (scrollY > 4 * height && scrollY < 5 * height) {
         return 5 * height - scrollY;
-      } 
-      if(scrollY === 6 * height){
+      }
+      if (scrollY === 6 * height) {
         return -height;
       }
-        
-    }else
-    if (index === 7) {
+    } else if (index === 7) {
       if (scrollY <= 5 * height) {
         return height;
       } else if (scrollY > 5 * height && scrollY < 6 * height) {
         return 6 * height - scrollY;
-      } 
+      }
       // if(scrollY === 7 * height){
       //   return;
       // }
@@ -92,13 +86,19 @@ class scroll {
     // }
   };
 
-  linearFormula = (currentScroll, position1, position2, scroll1, scroll2 ) => {
+  linearFormula = (currentScroll, position1, position2, scroll1, scroll2) => {
     const alpha = (currentScroll - scroll1) / (scroll2 - scroll1);
     const deltaPosition = position2 - position1;
     const currectPosition = position1 + deltaPosition * alpha;
     return currectPosition;
-  }
+  };
+
+  doubleLinearFormula = (currentScroll) => {
+    const rect = document.getElementsById("video").getClientRects();
+    console.log(rect);
 
+    return 1;
+  };
 }
 
 const _scroll = new scroll();

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

@@ -1,5 +1,7 @@
 import React, { useEffect, useState } from "react";
-import _ from 'lodash';
+import _ from "lodash";
+import codVideo from "../../../../assets/videos/COD.mp4";
+import scroll from '../../../../utils/scroll';
 
 export default function Mobile({ mobilePosition }) {
   const [checked, setChecked] = useState(mobilePosition > 0 ? true : false);
@@ -13,7 +15,14 @@ export default function Mobile({ mobilePosition }) {
 
   return (
     <div
-      className="fixed rounded-2xl flex flex-col overflow-hidden"
+      className={_.join(
+        [
+          "fixed rounded-2xl flex flex-col overflow-hidden shadow-2xl",
+          window.scrollY > 2500 ? "items-center justify-center" : "",
+          window.scrollY > 2500 ? "bg-black" : "",
+        ],
+        " "
+      )}
       style={{
         top: "5%",
         height: (window.innerHeight * 9) / 10,
@@ -22,8 +31,15 @@ export default function Mobile({ mobilePosition }) {
         // transform: `translateX(-${(window.innerHeight * 7) / 40 - 84}px)`,
       }}
     >
-      {
-        <div className="relative w-full h-full min-h-full">
+      <div
+        className={_.join(
+          [
+            "relative w-full h-full min-h-full",
+            window.scrollY > 2500 ? "hidden" : "",
+          ],
+          " "
+        )}
+      >
         <div
           className="absolute left-0 top-0 w-full backdrop-filter backdrop-blur-lg bg-black bg-opacity-40"
           style={{ height: "10%" }}
@@ -53,11 +69,33 @@ export default function Mobile({ mobilePosition }) {
           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
+        className={_.join(
+          [
+            "relative w-full h-full min-h-full bg-green-200 transition-all transform",
+            checked ? "-translate-y-full" : "",
+            window.scrollY > 2500 ? "hidden" : "",
+          ],
+          " "
+        )}
+      ></div>
+      {window.scrollY > 2500 ? (
+        <video
+          id="video"
+          className={_.join(["video border-0 outline-none animation-puls"], " ")}
+          style={{
+            height: (window.innerHeight * 9) / 25,
+            width: "100%",
+            // transform : scroll.doubleLinearFormula(window.scrollY)
+          }}
+          controls
+          autoPlay
+
+        >
+          <source src={codVideo} type={"video/mp4"} />
+        </video>
+      ) : null}
     </div>
   );
 }

src/views/Home/Page2/index.js

@@ -1,8 +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';
+import Mobile from "./Mobile";
+import qrImage from "../../../assets/images/qrImage.png";
 
 export default function Page2({ list, page }) {
   const height = window.innerHeight;
@@ -168,10 +168,21 @@ export default function Page2({ list, page }) {
           height: "140%",
         }}
       >
-        <div className="absolute left-8 top-8 h-40 w-40"><img src={qrImage} alt="" /></div>
+        <div className="absolute left-5 top-5 h-40 w-40">
+          <img src={qrImage} alt="" />
+        </div>
+        <div
+          className="absolute left-7 bg-purple-500"
+          style={{
+            height: (window.innerHeight * 9) / 25,
+            width: (window.innerHeight * 10) / 20 - 16,
+            bottom: (window.innerHeight * 9) / 30
+          }}
+        ></div>
       </div>
       {/* mobile phone */}
       <Mobile mobilePosition={mobilePosition} />
+      {/* video */}
     </div>
   );
 }