Parallax (#14)

* Finalize site for invites * mentor link * Parallax Effect on Hero
icssc · Nov 2, 2023 · 9c8885f · 9c8885f
1 parent 84cd2a3
commit 9c8885f
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 21 deletions.
diff --git a/src/components/hero/hero.js b/src/components/hero/hero.js
@@ -1,11 +1,26 @@
+import React, { useState, useEffect } from 'react';
 import { FaCalendar, FaLocationArrow } from "react-icons/fa";
 import styles from "../../styles/components/Hero.module.css";
 
 export default function HeroSection() {
+  const [scrollValue, setScrollValue] = useState(0);
+
+  useEffect(() => {
+    function handleScroll() {
+      setScrollValue(window.scrollY);
+    }
+
+    window.addEventListener('scroll', handleScroll);
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
   return (
     <>
-      <div className="z-10 mx-10 flex flex-col place-content-center gap-4">
-        <div className="flex flex-col place-content-center">
+      <div className="z-10 mx-10 flex flex-col place-content-center gap-4 relative" style={{ top: scrollValue * 0.2 + 'px' }}>
+        <div className="z-5 flex flex-col place-content-center">
           <h1 className="flex place-content-center text-center text-5xl md:text-7xl lg:text-8xl">
             WebJam 2023
           </h1>
@@ -18,7 +33,7 @@ export default function HeroSection() {
           </div>
         </div>
 
-        <div className="flex flex-row place-content-center gap-6 text-xl md:text-2xl lg:text-3xl">
+        <div className="z-5 flex flex-row place-content-center gap-6 text-xl md:text-2xl lg:text-3xl">
           <span className="flex flex-row items-center gap-4">
             <FaCalendar size={20} />
             <h2>November 13-17</h2>
@@ -29,7 +44,7 @@ export default function HeroSection() {
           </span>
         </div>
 
-        <div className="mx-auto mt-4 flex">
+        <div className="z-5 mx-auto mt-4 flex">
           <p className="text-2xl md:text-3xl lg:text-4xl">
             <a
               className="rounded-xl border-4 border-solid border-yellow-300 px-3 py-1 hover:bg-yellow-300 transition duration-300"
@@ -50,10 +65,10 @@ export default function HeroSection() {
         </div>
       </div>
 
-      <div className={`${styles.oceanTop} absolute left-0 top-0 w-[100%]`} />
-      <div className={`${styles.dolphin} absolute left-[-25vw] md:left-[4vw] top-0 md:top-[0] w-[300px] lg:w-[30vw]`} />
-      <div className={`${styles.pufferfish} absolute bottom-[20vw] md:bottom-[4vw] left-[1vw] lg:left-[5vw]  w-[50vw] lg:w-[30vw]`} />
-      <div className={`${styles.fishies} absolute bottom-[15vw] md:bottom-[7.5vw] right-[1vw] lg:right-[8vw]  w-[50vw] lg:w-[30vw]`} />
+      <div className={`${styles.oceanTop} absolute left-0 top-0 w-[100%]`} style={{ top: -scrollValue * .4 + 'px' }} />
+      <div className={`${styles.dolphin} absolute left-[-50vw] md:left-[4vw] top-0 md:top-[0] w-[300px] lg:w-[30vw]`} style={{ top: -scrollValue * 0.1 + 'px' }}  />
+      <div className={`${styles.pufferfish} absolute bottom-[20vw] md:bottom-[4vw] left-[1vw] lg:left-[5vw]  w-[50vw] lg:w-[30vw]`} style={{ top: -scrollValue * 0.45 - 50 + 'px' }} />
+      <div className={`${styles.fishies} absolute bottom-[15vw] md:bottom-[7.5vw] right-[1vw] lg:right-[8vw]  w-[50vw] lg:w-[30vw]`} style={{ top: -scrollValue * 0.3 - 50 + 'px' }} />
       <div className={`${styles.oceanTopFloor} absolute bottom-0 left-0 w-[100%]`} />
 
     </>

diff --git a/src/components/navbar.js b/src/components/navbar.js
@@ -24,7 +24,7 @@ export default function Navbar() {
   return (
     <nav className={`${styles.nav} ${showNav ? "opacity-100" : "opacity-0"} place-content-center md:pl-[4rem] md:place-content-start`}>
       <ul>
-        <a href="/">
+        <a href="#">
           <img src="/webjam_logo.png" alt="WebJam 2023 Logo" />
         </a>
         <li>

diff --git a/src/styles/components/Hero.module.css b/src/styles/components/Hero.module.css
@@ -1,21 +1,16 @@
-.heroContainer {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-}
-
 /* Graphics */
 .oceanTop {
     background-image: url("/assets/img/graphics/layer1/OceanTopCeiling.svg");
     height: 139px;
     margin-top: 90px;
+    z-index: 0;
 }
 
 .dolphin {
     background-image: url("/assets/img/graphics/layer1/Dolphin.svg");
     height: 100%;
     margin-top: 90px;
-    z-index: 2;
+    z-index: 0;
     background-size: contain;
     background-repeat: no-repeat;
     background-position: top;
@@ -26,7 +21,7 @@
 .pufferfish {
     background-image: url("/assets/img/graphics/layer1/PufferFish.svg");
     height: 100%;
-    z-index: 2;
+    z-index: 1;
     background-size: contain;
     background-repeat: no-repeat;
     background-position: bottom;
@@ -36,7 +31,7 @@
 .fishies {
     background-image: url("/assets/img/graphics/layer1/Fishies.svg");
     height: 100%;
-    z-index: 2;
+    z-index: 1;
     background-size: contain;
     background-repeat: no-repeat;
     background-position: bottom;
@@ -50,14 +45,14 @@
     background-size: contain;
     background-position: bottom;
     background-repeat: no-repeat;
-    z-index: 1;
+    z-index: 0;
 }
 
 @keyframes MoveUpDown {
     0%, 100% {
-      transform: translateY(0px);
+      transform: translateY(0%);
     }
     50% {
-        transform: translateY(20px);
+        transform: translateY(2%);
     }
 }
diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -31,4 +31,6 @@ main {
   margin-top: -2px;
   color: black;
   background: #F0FC97;
+  position: relative;
+  z-index: 10;
 }