Add Chapters BG Animation

monoMonu · Nov 12, 2024 · a22a49c · a22a49c
1 parent 2f04085
commit a22a49c
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 25 deletions.
diff --git a/src/Components/Locations/Locations.tsx b/src/Components/Locations/Locations.tsx
@@ -1,5 +1,5 @@
 "use client"
-import React, { useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import styles from '@/styles/locations.module.scss';
 import Image from 'next/image';
 
@@ -29,38 +29,59 @@ const sponsorList = [
 
 const Locations = () => {
 
+  const chapterSecRef = useRef<HTMLDivElement>(null);
   const ballRef1 = useRef<HTMLDivElement>(null);
   const ballRef2 = useRef<HTMLDivElement>(null);
-
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      if (chapterSecRef.current && ballRef1.current && ballRef2.current) {
+        const { width, height } = chapterSecRef.current.getBoundingClientRect();
+        const x = e.clientX / width - 0.5;
+        const y = e.clientY / height - 0.5;
+
+        ballRef1.current.style.transform = `translate(${-x * 500}px, ${-y * 500}px)`;
+        ballRef2.current.style.transform = `translate(${-x * 700}px, ${-y * 700}px)`;
+      }
+    };
+
+    window.addEventListener('mousemove', handleMouseMove);
+
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+    };
+  }, []);
+
   return (
     <div className={styles.Locations}>
-      <div className={styles.LocationsHeading}>
-      <h1>Geek Room Chapters</h1>
-      <p>Experience the Geek Room revolution at these prestigious institutions.</p>
-      </div>
-      <div className={styles.collegeGrid}>
-        {collegeList.map((college, index) => (
-          <div key={index} className={styles.collegeItem}>
-            <Image 
-              src={college.logo} 
-              alt={`${college.name} logo`}
-              width={100}
-              height={100}
-            />
-            <p>{college.name}</p>
-          </div>
-        ))}
+      <div style={{ width: '100%', height: '100%', position: 'relative' }} ref={chapterSecRef}>
+        <div className={styles.LocationsHeading}>
+          <h1>Geek Room Chapters</h1>
+          <p>Experience the Geek Room revolution at these prestigious institutions.</p>
+        </div>
+        <div className={styles.collegeGrid}>
+          {collegeList.map((college, index) => (
+            <div key={index} className={styles.collegeItem}>
+              <Image
+                src={college.logo}
+                alt={`${college.name} logo`}
+                width={100}
+                height={100}
+              />
+              <p>{college.name}</p>
+            </div>
+          ))}
+        </div>
       </div>
 
-       <div className={styles.LocationsHeading}>
-      <h1>Past Partners</h1>
-      <p>We&apos;re proud to partner with industry leaders who share our vision for a tech-empowered future.</p>
+      <div className={styles.LocationsHeading}>
+        <h1>Past Partners</h1>
+        <p>We&apos;re proud to partner with industry leaders who share our vision for a tech-empowered future.</p>
       </div>
       <div className={styles.collegeGrid}>
         {sponsorList.map((college, index) => (
           <div key={index} className={styles.collegeItem}>
-            <Image 
-              src={college.logo} 
+            <Image
+              src={college.logo}
               alt={`${college.name} logo`}
               width={100}
               height={100}

diff --git a/src/styles/locations.module.scss b/src/styles/locations.module.scss
@@ -98,15 +98,15 @@ div {
     .ball1 {
         width: 30vw;
         height: 30vw;
-        background-color: #00acb415;
+        background-color: #00acb417;
         top: 25vw;
         left: 4vw;
     }
 
     .ball2 {
         width: 20vw;
         height: 20vw;
-        background-color: #f159222f;
+        background-color: #f1592231;
         top: 0vw;
         right: 10vw;
     }