feat(home): animations and loading (#8)

* feat(home): add all animations * fix: overflow on ring animation * feat: loader(web) * feat: loading(mobile) * wip: loading * fix: many fixes * feat: loading --------- Co-authored-by: Bhoopesh <[email protected]> Co-authored-by: pirate <[email protected]>
delta · Dec 3, 2023 · 3e5bf2e · 3e5bf2e
1 parent 3594432
commit 3e5bf2e
Show file tree

Hide file tree

Showing 23 changed files with 1,136 additions and 159 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
@@ -7,6 +7,11 @@
     src: url('../assets/fonts/7032-fontps.ttf');
 }
 
+@font-face {
+    font-family: 'ROGG';
+    src: url('../assets/fonts/rog.ttf');
+}
+
 @font-face {
     font-family: 'Orbitron';
     src: url('../assets/fonts/Orbitron-Regular.ttf');
@@ -17,6 +22,11 @@
   src : url('../assets/fonts/Nunito-VariableFont_wght.ttf');
 }
 
+@font-face {
+    font-family: 'sevenseg';
+    src: url('../assets/fonts/7segment.ttf');
+}
+
 * {
     -moz-user-drag: none;
     -webkit-user-drag: none;
@@ -76,6 +86,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;
@@ -134,10 +161,100 @@ body {
     }
 }
 
-/* 
-@media screen and (max-height: 720px) {
-    .footer-bg{
-        position: relative;
-        bottom: 1.5rem;
+.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;
+    }
+}
+
+
+.sevensegtext{
+    font-family: 'sevenseg';
+    font-size: 4rem;
+}
+
+@media screen and (max-width: 1240px) and (height > 800px) {
+    .loadingdivs {
+        height: 19%;
+    }
+}
+
+.rogfont{
+    font-family: 'ROGG';
+    font-size: 2.5rem;
+}
+
+@media screen and (max-width: 1240px) {
+    .rogfont{
+        font-size: 1rem;
+    }
+}
+
+.greenbutton{
+    filter: hue-rotate(137deg) drop-shadow(0 0 20px #23A347) brightness(120%);
+}