'scroll'

imbirdperson · Aug 22, 2024 · 369bf20 · 369bf20
1 parent ce951ff
commit 369bf20
Show file tree

Hide file tree

Showing 7 changed files with 253 additions and 149 deletions.
diff --git a/app/page.js b/app/page.js
@@ -1,58 +1,159 @@
+"use client"; // Add this line at the top
 import '../style/index.scss';
-import Header from "../components/Header";
 import { GoArrowDown } from "react-icons/go";
-import { ReactLenis, useLenis } from 'lenis/react';
+import Header from '../components/Header';
+import Lenis from '@studio-freight/lenis';
+import { useEffect , useState} from 'react';
+// import { ScrollContainer, Animator, batch, FadeIn , Sticky, FadeOut} from 'react-scroll-motion';
 
 export default function Home() {
+  useEffect(() => {
+    const lenis = new Lenis({
+      duration: 1.2,
+      easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), // Custom easing function
+      direction: 'vertical', // Can be 'vertical' or 'horizontal'
+      gestureDirection: 'vertical', // Can be 'vertical' or 'horizontal'
+      smooth: true,
+      smoothTouch: false,
+      touchMultiplier: 2,
+    });
+
+    function raf(time) {
+      lenis.raf(time);
+      requestAnimationFrame(raf);
+    }
+
+    requestAnimationFrame(raf);
+
+    return () => lenis.destroy(); // Cleanup on unmount
+  }, []);
   return (
     <>
     <Header/>
+    <Banner/>
     <div className='content'>
-      <VideoBanner/>
+      <div className='home-content'>
+        hello my dear kunji
+        hello my dear kunji
+        hello my dear kunji
+        hello my dear kunji
+        hello my dear kunji
+        hello my dear kunji
+        hello my dear kunji
+        <br></br>
+        hello my dear kunji
+        <br></br>
+        hello my dear kunji
+        <br></br>
+        hello my dear kunji
+        <br></br>
+        hello my dear kunji
+        <br></br>
+        hello my dear kunji
+        <br></br>
+        hello my dear kunji
+        <br></br>
+        <br></br>
+        <br></br>
+        <br></br>
+        <br></br>
+        <br></br>
+        <br></br>
+        <br></br>
+        <br></br>
+        <br></br>
+        <br></br>
+        <br></br>
+        <br></br>
+        <br></br>
+        <br></br>
+        <br></br>
+        <br></br>
+        <br></br>
+        <br></br>
+        <br></br>
+        <br></br>
+        <br></br>
+        <br></br>
+        <br></br>
+        <br></br>
+        hello my dear kunji
+        hello my dear kunji
+        hello my dear kunji
+        hello my dear kunji
+        hello my dear kunji
+        hello my dear kunji
+        hello my dear kunji
+        hello my dear kunji
+        hello my dear kunji
+        hello my dear kunji
+        hello my dear kunji
+        hello my dear kunji
+        hello my dear kunji
+        hello my dear kunji
+        hello my dear kunji
+        hello my dear kunji
+        hello my dear kunji
+        hello my dear kunji
+        hello my dear kunji
+        hello my dear kunji
+        hello my dear kunji
+        hello my dear kunji
+        hello my dear kunji
+        hello my dear kunji
+        hello my dear kunji
+      </div>
     </div>
-    <HomePageContent/>
     </>
   );
 }
 
 
-const VideoBanner = () => {
+const Banner = () => {
+  const [opacity, setOpacity] = useState(1);
+   const handleScroll = () => {
+    // Adjust the divisor to control the scroll distance to opacity mapping
+    const scrollTop = window.scrollY;
+    const maxScroll = 600; // Maximum scroll distance at which opacity becomes 0
+    const newOpacity = Math.max(1 - scrollTop / maxScroll, 0);
+    setOpacity(newOpacity);
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll);
+
+    // Clean up the event listener
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
   return (
-    <>
+    <div className='banner-wrapper' style={{opacity}}>
+      {/* <Animator animation={batch(Sticky(), FadeOut())}> */}
       <video className='video' autoPlay loop muted>
         <source src="/videos/bannerVideo.mp4" type="video/mp4" />
         Your browser does not support the video tag.
       </video>
-      <div className='content-left'>
-        <h1>VIEW the SHOWREEL</h1>
-        <p>
-          Ripley nominated for 13 EMMY awards - including for Visual Effects
-        </p>
+      <div className='text-overlay'>
+        <span className="text-item heading">Showreel '24</span>
+        <span className="text-item side">
+          <p>Visual Effects</p>
+          <p>Development</p>
+          <p>Storyboard</p>
+        </span>
       </div>
-      <div className='content-right'>SCROLL
-        <GoArrowDown size={18}/>
-
+      <div className='scroll'>
+        <div className="time-zone">
+            AUS : 234: 3435
+        </div>
+        <div>
+          Scroll
+          <GoArrowDown size={18}/>
+        </div>
+        <div></div>
       </div>
-    </>
-  );
-};
-
-
-
-const HomePageContent = () => {
-  return (
-    <>
-    HELOOO 
-
-Vimeo
-Behance
-
-Contact
-
--
-
-If you have a scheduling inquiry for our creative services or wish to chat about an upcoming project need, please contact us at [email protected]
-    awadf
-    </>
+      {/* </Animator> */}
+    </div>
   )
 }
diff --git a/components/Header.js b/components/Header.js
@@ -3,17 +3,17 @@ const Header = () => {
         <>
         <div className="header-wrapper">
             <div className="logo">
-                DEEPAK RAJAN ~ 2024
+                <b>DEEPAK</b> RAJAN ~ 2024
             </div>
             <div className="menu-wrapper">
                 <div className="menu">
-                    ART
+                    WORKS
                 </div>
                 <div className="menu">
-                    WORKS
+                    ART
                 </div>
                 <div className="menu">
-                    BLOGS
+                    BLOG
                 </div>
                 <div className="menu profile">
                     PROFILE

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,11 +9,13 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@studio-freight/lenis": "^1.0.42",
     "lenis": "^1.1.9",
     "next": "14.2.5",
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^5.3.0",
+    "react-scroll-motion": "^0.3.3",
     "sass": "^1.77.8"
   },
   "devDependencies": {

diff --git a/style/components/header.scss b/style/components/header.scss
@@ -1,37 +1,44 @@
 .header-wrapper{
+    position: fixed;
+    top: 0;
+    left: 0;
     width: 100%;
-    position: absolute;
-    top:0;
-    font-family: $font-plex;
-    font-weight: 400;
+    z-index: 1000;
+    padding: 15px 20px;
     display: flex;
     justify-content: space-between;
-    align-items: center;
-    padding:50px 80px;
-    z-index: 10;
-    font-size: 17px;
+    font-family: $font-plex;
 
     .logo{
-        display: block;
-        padding:2px;
-        font-weight: 500;
+        font-size:26px;
+        letter-spacing: -3px;
+        b{
+            font-weight: 600;
+        }
     }
 
     .menu-wrapper{
         display: flex;
+        align-items: center;
+        font-family: $font-inter;
 
         .menu{
-            margin-left: 50px;
-            padding:5px 10px;
+            font-size: 14px;
+            // letter-spacing: 1px;
+            // background-color: #333333;
+            // background-color: white;
+            // color:black;
+            font-weight: 500;
+            font-family: $font-plex;
+            padding:4px 15px;
+
+            margin: 1px;
         }
 
         .profile{
-            background-color: #fff;
+            background-color: white;
             color:$background-color;
-            border-radius: 10px;
+            border-radius: 2px;
         }
     }
-
-
-
 }
diff --git a/style/index.scss b/style/index.scss
@@ -16,4 +16,12 @@
 
 @import 'components/header.scss';
 
-@import 'pages/home.scss';
+@import 'pages/home.scss';
+
+.content{
+  // margin: 20px;
+  width:100%;
+  position: relative;
+  z-index: 2;
+  padding: 20px 20px 20px 20px;
+}