Merge pull request #56 from HackDavis/feat/river-effects

Feat/river effects

app/(pages)/(index-page)/_components/RiverCow/RightTree.module.scss

@@ -15,6 +15,9 @@
     z-index: 3;
 }
 
+
+
+
 .right_tree_shadow {
     position: absolute;
     height: 100%;
@@ -31,4 +34,4 @@
     bottom: -20%;
     right: 0;
     z-index: 1;
-}
+}

app/(pages)/(index-page)/_components/RiverCow/RightTree.tsx

@@ -1,32 +1,57 @@
-import styles from './RightTree.module.scss';
+import { useState, useEffect, useRef } from 'react';
 import Image from 'next/image';
 
+import styles from './RightTree.module.scss';
+
 import rightTree from 'public/index/RiverCow/right-tree.png';
 import rightTreeShadow from 'public/index/RiverCow/right-tree-shadow.png';
 import rightTreeReflection from 'public/index/RiverCow/right-tree-reflection.png';
 
 export default function RightTree() {
+  const viewRef = useRef<HTMLDivElement>(null);
+
+  const [scrollDistance, setScrollDistance] = useState(0);
+
+  const handleScroll = () => {
+    const screenHeight = window.screen.height;
+    if (viewRef.current) {
+      const boundingRect = viewRef.current.getBoundingClientRect();
+      const distance = screenHeight / 2 - boundingRect.y;
+      setScrollDistance(
+        Math.max(0, Math.min(distance, boundingRect.height * 3))
+      );
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
   return (
-    <div className={styles.container}>
+    <div className={styles.container} ref={viewRef}>
       <Image
         src={rightTree}
         alt="Tree hanging over river."
         placeholder="blur"
         className={styles.right_tree}
+        style={{ transform: `translateY(${scrollDistance * 0.2}px)` }}
         sizes="(min-width: 600px) 40vw, 215px"
       />
       <Image
         src={rightTreeShadow}
         alt="Tree hanging over river."
         placeholder="blur"
         className={styles.right_tree_shadow}
+        style={{ transform: `translateY(${scrollDistance * 0.15}px)` }}
         sizes="(min-width: 600px) 40vw, 215px"
       />
       <Image
         src={rightTreeReflection}
         alt="Tree hanging over river."
         placeholder="blur"
         className={styles.right_tree_reflection}
+        style={{ transform: `translateY(${scrollDistance * 0.12}px)` }}
         sizes="(min-width: 600px) 40vw, 215px"
       />
     </div>

app/(pages)/(index-page)/_components/RiverCow/RiverCow.module.scss

@@ -87,22 +87,6 @@
     }
 }
 
-.river_cow_container {
-    width: 600px;
-    margin-top: 5%;
-    margin-right: -5%;
-
-    @include mixins.phone {
-        width: 300px;
-        align-self: flex-start;
-    }
-}
-
-.river_cow {
-    width: 100%;
-    height: auto;
-}
-
 .base_tree_container {
     width: 100%;
     margin-top: -25%;

app/(pages)/(index-page)/_components/RiverCow/RiverCow.tsx

@@ -2,8 +2,8 @@ import styles from './RiverCow.module.scss';
 import Image from 'next/image';
 
 import baseTree from 'public/index/RiverCow/base-tree.png';
-import riverCow from 'public/index/RiverCow/river-cow.png';
 import RightTree from './RightTree';
+import RiverCowAnimation from './RiverCowAnimation';
 
 export default function RiverCow() {
   return (
@@ -21,15 +21,7 @@ export default function RiverCow() {
         </div>
         <RightTree />
       </div>
-      <div className={styles.river_cow_container}>
-        <Image
-          src={riverCow}
-          alt="Cow sitting on rock reminiscing on past adventures by looking at polaroids."
-          placeholder="blur"
-          className={styles.river_cow}
-          sizes="(min-width: 780px) 600px, 300px"
-        />
-      </div>
+      <RiverCowAnimation />
       <div className={styles.bottom_text}>
         <h3>
           HackDavis is <br />

app/(pages)/(index-page)/_components/RiverCow/RiverCowAnimation.module.scss

@@ -0,0 +1,17 @@
+@use 'app/(pages)/_globals/mixins';
+
+.river_cow_container {
+    width: 600px;
+    margin-top: 5%;
+    margin-right: -5%;
+
+    @include mixins.phone {
+        width: 300px;
+        align-self: flex-start;
+    }
+}
+
+.river_cow {
+    width: 100%;
+    height: auto;
+}

app/(pages)/(index-page)/_components/RiverCow/RiverCowAnimation.tsx

@@ -0,0 +1,37 @@
+import { useState, useEffect } from 'react';
+import Image from 'next/image';
+
+import styles from './RiverCowAnimation.module.scss';
+import riverCow from 'public/index/RiverCow/river-cow.png';
+import riverCow2 from 'public/index/RiverCow/river-cow-2.png';
+import riverCow3 from 'public/index/RiverCow/river-cow-3.png';
+
+const cowFrames = [riverCow, riverCow2, riverCow3];
+
+export default function RiverCowAnimation() {
+  const [cowIndex, setCowIndex] = useState(0);
+
+  const handleNextFrame = () => {
+    setCowIndex((prev) => (prev + 1) % cowFrames.length);
+  };
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      handleNextFrame();
+    }, 2000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <div className={styles.river_cow_container}>
+      <Image
+        src={cowFrames[cowIndex]}
+        alt="Cow sitting on rock reminiscing on past adventures by looking at polaroids."
+        placeholder="blur"
+        className={styles.river_cow}
+        sizes="(min-width: 780px) 600px, 300px"
+      />
+    </div>
+  );
+}