feat: torch effect (#10)

delta · Dec 8, 2023 · a6d665f · a6d665f
1 parent 8382caa
commit a6d665f
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 12 deletions.
diff --git a/src/app/gallery/history.module.css b/src/app/gallery/history.module.css
@@ -14,6 +14,18 @@
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
+    position: relative;
+    overflow: hidden;
+}
+
+.torch {
+    position: absolute;
+    width: 200vw;
+    height: 200vh;
+    left: 50%;
+    top: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    background-image: radial-gradient(circle at center, transparent, #000 7%);
 }
 
 @media screen and (min-width: 768px) {
@@ -23,3 +35,9 @@
         mask-composite: intersect;
     }
 }
+
+@media screen and (max-width: 768px) {
+    .torch {
+        display: none;
+    }
+}
diff --git a/src/app/gallery/page.tsx b/src/app/gallery/page.tsx
@@ -9,7 +9,7 @@ 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 { WheelEvent, TouchEvent, useState, useRef } from 'react';
 import { useRouter } from 'next/navigation';
 
 const History = () => {
@@ -36,6 +36,7 @@ const History = () => {
     const [isScrolled, setIsScrolled] = useState<boolean>(false);
     const [touchStart, setTouchStart] = useState<number | null>(null);
     const [touchEnd, setTouchEnd] = useState<number | null>(null);
+    const shadowRef = useRef<HTMLDivElement>(null);
     const router = useRouter();
     const simulateScroll = (event: WheelEvent<HTMLDivElement>) => {
         if (!isScrolled) {
@@ -52,12 +53,27 @@ const History = () => {
     const handleTouchStart = (event: TouchEvent<HTMLDivElement>) => {
         setTouchEnd(null);
         setTouchStart(event.targetTouches[0].clientY);
+        const x = event.targetTouches[0].clientX - document.documentElement.clientWidth * 1.5;
+        const y = event.targetTouches[0].clientY - document.documentElement.clientHeight * 1.5;
+        if (!shadowRef.current) return;
+        shadowRef.current.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
     };
 
     const handleTouchMove = (event: TouchEvent<HTMLDivElement>) => {
+        const x = event.targetTouches[0].clientX - document.documentElement.clientWidth * 1.5;
+        const y = event.targetTouches[0].clientY - document.documentElement.clientHeight * 1.5;
+        if (!shadowRef.current) return;
+        shadowRef.current.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
         setTouchEnd(event.targetTouches[0].clientY);
     };
 
+    const handleMouseMove = (event: React.MouseEvent) => {
+        const x = event.clientX - document.documentElement.clientWidth * 1.5;
+        const y = event.clientY - document.documentElement.clientHeight * 1.5;
+        if (!shadowRef.current) return;
+        shadowRef.current.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
+    };
+
     const handleTouchEnd = () => {
         if (touchStart === null || touchEnd === null) {
             return;
@@ -84,7 +100,9 @@ const History = () => {
             onTouchStart={handleTouchStart}
             onTouchMove={handleTouchMove}
             onTouchEnd={handleTouchEnd}
+            onMouseMove={handleMouseMove}
         >
+            <div className={styles.torch} ref={shadowRef}></div>
             <div className="absolute top-0 w-full p-5">
                 <NavBar />
             </div>
@@ -116,7 +134,7 @@ const History = () => {
                                     objectFit="cover"
                                     objectPosition="center"
                                     className={
-                                        'max-sm:rounded-xl md:opacity-20 ' + 'carousel-torch'
+                                        'max-sm:rounded-xl md:opacity-60 ' + 'carousel-torch'
                                     }
                                     alt="history"
                                 />

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -18,8 +18,8 @@
 }
 
 @font-face {
-  font-family: 'Nunito';
-  src : url('../assets/fonts/Nunito-VariableFont_wght.ttf');
+    font-family: 'Nunito';
+    src: url('../assets/fonts/Nunito-VariableFont_wght.ttf');
 }
 
 @font-face {
@@ -182,7 +182,7 @@ body {
 
 @keyframes torch {
     0% {
-        opacity: 0.3;
+        opacity: 0.6;
     }
     100% {
         opacity: 1;
@@ -237,8 +237,7 @@ body {
     }
 }
 
-
-.sevensegtext{
+.sevensegtext {
     font-family: 'sevenseg';
     font-size: 4rem;
 }
@@ -249,19 +248,19 @@ body {
     }
 }
 
-.rogfont{
+.rogfont {
     font-family: 'ROGG';
     font-size: 2.5rem;
 }
 
 @media screen and (max-width: 1240px) {
-    .rogfont{
+    .rogfont {
         font-size: 1rem;
     }
 }
 
-.greenbutton{
-    filter: hue-rotate(137deg) drop-shadow(0 0 20px #23A347) brightness(120%);
+.greenbutton {
+    filter: hue-rotate(137deg) drop-shadow(0 0 20px #23a347) brightness(120%);
 }
 
 @media screen and (min-width: 1240px) {
@@ -274,4 +273,4 @@ body {
     .about {
         min-height: max(100vh, 860px);
     }
-}
+}