Merging Fire-Animation from Dev (#49)

* Hero Section (#27) * set up initial template * added navbar to hero section * responsive hero section * Basic About is done * About is added * created cursor component with wand image (#30) * "created cursor component with wang image with '#' will be ignored, and an empty message aborts the commit. * Created Simple About Section (#31) * Hero Section (#27) * set up initial template * added navbar to hero section * responsive hero section * Basic About is done * Merge from Dev (#33) * Hero Section (#27) * set up initial template * added navbar to hero section * responsive hero section * Basic About is done * About is added * fixed cursor selection bugs and added a trail * Fixed missing component import for FAQ * added comment in luge.js --------- Co-authored-by: Kevin Monisit <monisitkevin@gmail.com> * Basic Sections (#32) * completed basic generic sections * Formatting with prettier * added some colors and additional divider * moved text divider half way up to previous section --------- Co-authored-by: Kevin Monisit <monisitkevin@gmail.com> * Fire Animation (#45) * Merging from Dev (#35) * Hero Section (#27) * set up initial template * added navbar to hero section * responsive hero section * Basic About is done * About is added * created cursor component with wand image (#30) * "created cursor component with wang image with '#' will be ignored, and an empty message aborts the commit. * Created Simple About Section (#31) * Hero Section (#27) * set up initial template * added navbar to hero section * responsive hero section * Basic About is done * Merge from Dev (#33) * Hero Section (#27) * set up initial template * added navbar to hero section * responsive hero section * Basic About is done * About is added * fixed cursor selection bugs and added a trail * Fixed missing component import for FAQ * added comment in luge.js --------- Co-authored-by: Kevin Monisit <monisitkevin@gmail.com> * Basic Sections (#32) * completed basic generic sections * Formatting with prettier * added some colors and additional divider * moved text divider half way up to previous section --------- Co-authored-by: Kevin Monisit <monisitkevin@gmail.com> --------- Co-authored-by: poojakedia <67982568+poojakedia@users.noreply.github.com> Co-authored-by: Shivam Kajaria <57373405+bhivam@users.noreply.github.com> * Fire Animation * Fire Animation * Animating fire-animation * Animating fire-animation * Fire-Animation * Fire-Animation Fire Animation. * Fire Animation * deleted webp in favor of png, fixed safari stuttering animation --------- Co-authored-by: Kevin Monisit <monisitkevin@gmail.com> Co-authored-by: poojakedia <67982568+poojakedia@users.noreply.github.com> Co-authored-by: Shivam Kajaria <57373405+bhivam@users.noreply.github.com> --------- Co-authored-by: poojakedia <67982568+poojakedia@users.noreply.github.com> Co-authored-by: Shivam Kajaria <57373405+bhivam@users.noreply.github.com> Co-authored-by: dchaudhari0811 <136735426+dchaudhari0811@users.noreply.github.com>
HackRU · Feb 4, 2024 · 5bda5ea · 5bda5ea
1 parent 41aed28
commit 5bda5ea
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 2 deletions.
diff --git a/app/(landing)/sections/Hero/Hero.tsx b/app/(landing)/sections/Hero/Hero.tsx
@@ -1,7 +1,28 @@
+"use client";
 import Image from 'next/image';
 import Navbar from './Navbar';
+import React, { useState, useEffect } from "react";
+import clsx from 'clsx';
+
+const FIRE_IMG = [
+  "/landing/fire3.png",
+  "/landing/fire1.png",
+  "/landing/fire2.png",
+];
+
+const animationTime = 700;
 
 export default function Hero() {
+  const [currentImageIndex, setCurrentImageIndex] = useState(0);
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setCurrentImageIndex((prevIndex) => (prevIndex + 1) % FIRE_IMG.length);
+    }, animationTime);
+
+    return () => clearInterval(intervalId);
+  }, []);
+
   return (
     <>
       <Navbar />
@@ -30,13 +51,42 @@ export default function Hero() {
         </div>
 
         <Image
-          src="/landing/fire.png"
+          src={FIRE_IMG[0]}
+          width="0"
+          height="0"
+          sizes="100vw"
+          alt="Fire"
+          // https://stackoverflow.com/questions/69230343/nextjs-image-component-with-fixed-witdth-and-auto-height
+          className={clsx("h-auto w-[790px] pl-8 md:w-[800px] lg:w-[800px]", {
+            "opacity-100": currentImageIndex === 0,
+            "opacity-0 absolute": currentImageIndex !== 0,
+          })}
+          priority
+        />
+        <Image
+          src={FIRE_IMG[1]}
+          width="0"
+          height="0"
+          sizes="100vw"
+          alt="Fire"
+          // https://stackoverflow.com/questions/69230343/nextjs-image-component-with-fixed-witdth-and-auto-height
+          className={clsx("h-auto w-[790px] pl-8 md:w-[800px] lg:w-[800px]", {
+            "opacity-100": currentImageIndex === 1,
+            "opacity-0 absolute ": currentImageIndex !== 1,
+          })}
+          priority
+        />
+        <Image
+          src={FIRE_IMG[2]}
           width="0"
           height="0"
           sizes="100vw"
           alt="Fire"
           // https://stackoverflow.com/questions/69230343/nextjs-image-component-with-fixed-witdth-and-auto-height
-          className="h-auto w-[790px] pl-8 md:w-[550px] lg:w-[650px]"
+          className={clsx("h-auto w-[790px] pl-8 md:w-[800px] lg:w-[800px]", {
+            "opacity-100": currentImageIndex === 2,
+            "opacity-0 absolute ": currentImageIndex !== 2,
+          })}
           priority
         />
       </div>

diff --git a/public/landing/Fire1.PNG b/public/landing/Fire1.PNG
diff --git a/public/landing/Fire2.PNG b/public/landing/Fire2.PNG
diff --git a/public/landing/Fire3.PNG b/public/landing/Fire3.PNG