feat(home): add all animations

delta · Nov 27, 2023 · 8bb2baf · 8bb2baf
1 parent 70ec54a
commit 8bb2baf
Show file tree

Hide file tree

Showing 9 changed files with 339 additions and 129 deletions.
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
@@ -4,33 +4,77 @@ import Image from 'next/image';
 import bigmascot from '../../assets/images/bigmascot.png';
 import { motion } from 'framer-motion';
 import { AboutCard, AboutCardMob, NavBar, SideBar } from '@/components';
-import { WheelEvent, TouchEvent, useState } from 'react';
+import { WheelEvent, TouchEvent, useState, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 
 const About = () => {
     const [isScrolled, setIsScrolled] = useState<boolean>(false);
+    const [scrollAllowed, setScrollAllowed] = useState<boolean>(true);
     const router = useRouter();
-    const simulateScroll = (event: WheelEvent<HTMLDivElement> | TouchEvent<HTMLDivElement>) => {
-        event.stopPropagation();
-        event.preventDefault();
-        setIsScrolled(true);
-        if (event.isPropagationStopped()) {
-            console.log(event.isPropagationStopped());
+    const simulateScroll = (event: WheelEvent<HTMLDivElement>) => {
+        if (!isScrolled) {
+            event.stopPropagation();
+            if (event.deltaY > 0) {
+                setTimeout(() => {
+                    router.push('/gallery');
+                }, 1100);
+                setIsScrolled(true);
+            } else if (event.deltaY < 0) {
+                setTimeout(() => {
+                    router.push('/home');
+                }, 1100);
+                setIsScrolled(true);
+            }
+        }
+    };
+    const [touchStart, setTouchStart] = useState<number | null>(null);
+    const [touchEnd, setTouchEnd] = useState<number | null>(null);
+
+    const handleTouchStart = (event: TouchEvent<HTMLDivElement>) => {
+        console.log('hello');
+        setTouchEnd(null);
+        setTouchStart(event.targetTouches[0].clientY);
+    };
+
+    const handleTouchMove = (event: TouchEvent<HTMLDivElement>) => {
+        setTouchEnd(event.targetTouches[0].clientY);
+    };
+
+    const handleTouchEnd = () => {
+        if (touchStart === null || touchEnd === null) {
+            return;
+        }
+        const distance = touchStart - touchEnd;
+        if (distance < 0) {
+            setTimeout(() => {
+                router.push('/home');
+            }, 1100);
+            setIsScrolled(true);
+        } else if (distance > 0) {
             setTimeout(() => {
                 router.push('/gallery');
             }, 1100);
+            setIsScrolled(true);
         }
     };
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setScrollAllowed(true);
+        }, 1100);
+        return () => {
+            clearTimeout(timer);
+        };
+    }, [scrollAllowed]);
     return (
         <div
             className={
-                'h-screen w-full text-center p-7 about flex flex-col' +
-                ' ' +
-                (isScrolled ? 'scrolled' : 'transitioned')
+                'h-screen w-full text-center p-7 about flex flex-col overflow-y-hidden ' +
+                (isScrolled ? ' scrolled' : ' transitioned')
             }
-            onWheel={simulateScroll}
-            onTouchStart={simulateScroll}
-            onTouchMove={simulateScroll}
+            onWheel={scrollAllowed ? simulateScroll : undefined}
+            onTouchStart={scrollAllowed ? handleTouchStart : undefined}
+            onTouchMove={scrollAllowed ? handleTouchMove : undefined}
+            onTouchEnd={scrollAllowed ? handleTouchEnd : undefined}
         >
             <div className="flex w-full relative z-10">
                 <NavBar />

diff --git a/src/app/gallery/page.tsx b/src/app/gallery/page.tsx
@@ -9,6 +9,8 @@ import 'swiper/css/bundle';
 import { NavBar, SideBar } from '@/components';
 import Image from 'next/image';
 import virat from '../../assets/images/virat.jpg';
+import { WheelEvent, TouchEvent, useState } from 'react';
+import { useRouter } from 'next/navigation';
 
 const History = () => {
     const slides = [1, 2, 3, 4, 5, 6, 7, 8, 9];
@@ -31,11 +33,56 @@ const History = () => {
         },
     };
 
+    const [isScrolled, setIsScrolled] = useState<boolean>(false);
+    const [touchStart, setTouchStart] = useState<number | null>(null);
+    const [touchEnd, setTouchEnd] = useState<number | null>(null);
+    const router = useRouter();
+    const simulateScroll = (event: WheelEvent<HTMLDivElement>) => {
+        if (!isScrolled) {
+            event.stopPropagation();
+            if (event.deltaY < 0) {
+                setTimeout(() => {
+                    router.push('/about');
+                }, 1100);
+                setIsScrolled(true);
+            }
+        }
+    };
+
+    const handleTouchStart = (event: TouchEvent<HTMLDivElement>) => {
+        setTouchEnd(null);
+        setTouchStart(event.targetTouches[0].clientY);
+    };
+
+    const handleTouchMove = (event: TouchEvent<HTMLDivElement>) => {
+        setTouchEnd(event.targetTouches[0].clientY);
+    };
+
+    const handleTouchEnd = () => {
+        if (touchStart === null || touchEnd === null) {
+            return;
+        }
+        const distance = touchStart - touchEnd;
+        if (distance < 0) {
+            setTimeout(() => {
+                router.push('/about');
+            }, 1100);
+            setIsScrolled(true);
+        }
+    };
+
     return (
         <div
             className={
-                styles.historyBG + ' ' + 'h-screen w-screen p-0 flex justify-center items-center'
+                styles.historyBG +
+                ' ' +
+                'h-screen w-screen p-0 flex justify-center items-center overflow-y-hidden' +
+                (isScrolled ? 'scrolled' : '')
             }
+            onWheel={simulateScroll}
+            onTouchStart={handleTouchStart}
+            onTouchMove={handleTouchMove}
+            onTouchEnd={handleTouchEnd}
         >
             <div className="absolute top-0 w-full p-5">
                 <NavBar />
@@ -50,7 +97,7 @@ const History = () => {
                         slidesPerView={4}
                         autoplay={{
                             delay: 1500,
-                            disableOnInteraction: false,
+                            disableOnInteraction: true,
                         }}
                         loop={true}
                         pagination={{ enabled: false }}
@@ -60,14 +107,16 @@ const History = () => {
                         {slides.map(slide => (
                             <SwiperSlide
                                 key={slide}
-                                className={`h-[100%] w-[23%] bg-amber-400 max-sm:rounded-xl`}
+                                className={`h-[100%] w-[23%] bg-black max-sm:rounded-xl`}
                             >
                                 <Image
                                     src={virat}
                                     layout="fill"
                                     objectFit="cover"
                                     objectPosition="center"
-                                    className="max-sm:rounded-xl"
+                                    className={
+                                        'max-sm:rounded-xl md:opacity-20 ' + 'carousel-torch'
+                                    }
                                     alt="history"
                                 />
                             </SwiperSlide>

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -71,6 +71,23 @@ body {
     -o-animation: fadeout 1.5s;
 }
 
+.blue-scroll{
+    animation: blue-glow 0.5s;
+    -moz-animation: blue-glow 1.5s;
+    -webkit-animation: blue-glow 1.5s;
+    -o-animation: blue-glow 1.5s;
+    animation-delay: 0.8s;
+}
+
+@keyframes blue-glow {
+    from{
+        background-color: initial;
+    }
+    to{
+        background-color: #7EFBFE;
+    }
+}
+
 @keyframes fadeout {
     from {
         opacity: 1;
@@ -128,3 +145,82 @@ body {
         background-position: center;
     }
 }
+
+.carousel-torch:hover {
+    animation: torch 1s;
+}
+
+.rings{
+    animation: rings 0.7s;
+
+}
+.rings2{
+    animation: rings2 0.7s ;
+
+
+}
+.fullrings{
+    animation: fullrings 0.7s;
+
+}
+
+@keyframes torch {
+    0% {
+        opacity: 0.3;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes rings {
+    0%{
+        transform: translateY(-30vh);
+    }
+    90%{
+        transform: translateY(20vh);
+    }
+
+}
+
+@keyframes rings2 {
+    0%{
+        transform: translateY(-60vh);
+    }   
+
+    90%{
+        transform: translateY(20vh);
+    }
+
+}
+
+@keyframes fullrings {
+    0%{
+        opacity: 0;
+    }
+    90%{
+        opacity: 0;
+    }
+    100%{
+        opacity: 1;
+    }
+
+}
+
+@keyframes anim {
+    0% {
+        mask-image: radial-gradient(circle, #000 90%,transparent 90%);
+        mask-position: 0% 0%;
+    }
+    80% {
+        mask-position: 0% 800px;
+    }    
+    81% {
+        mask-image: none;
+        opacity: 0.4;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+