modified to construct the component impressions

2026-02-24 16:57:23 -06:00
parent ee4a4be907
commit 0d37fb3536
8 changed files with 11 additions and 8 deletions
@@ -0,0 +1,68 @@
+.backgroundContainer {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 725px;
+    height: 615px;
+    z-index: -1;
+    overflow: hidden;
+}
+
+.bgImage {
+    position: absolute;
+    inset: 0;
+    background-size: cover;
+    background-position: center;
+    transition: opacity 2s ease-in-out;
+    opacity: 1;
+    z-index: 1;
+}
+
+.bgImage.fade {
+    z-index: 0;
+    opacity: 0;
+}
+
+.bgImage.fade.active {
+    opacity: 1;
+    z-index: 1;
+}
+
+.bgImage::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(to right, #f9f9f9, rgba(128, 128, 128, 0));
+}
+
+@media (max-width: 800px) {
+
+    .backgroundContainer {
+        background-image: url("/rock.jpg");
+        background-size: cover;
+        background-position: center;
+        width: 600px;
+        height: 650px;
+        right: 50%;
+        transform: translateX(50%);
+    }
+
+    .bgImage {
+        display: none;
+        visibility: hidden;
+    }
+
+    .backgroundContainer::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(to right, #f9f9f9, rgba(128, 128, 128, 0));
+    }
+
+    .backgroundContainer::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(to left, #f9f9f9, rgba(128, 128, 128, 0));
+    }
+}
@@ -0,0 +1,45 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import "./Background.css";
+
+const images = [
+  "/rock2.jpg",
+  "/CEDETEC.jpg",
+  "/FES-ACATLAN.jpg",
+  "/DSC.jpeg",
+];
+
+export default function BackgroundRotator() {
+  const [current, setCurrent] = useState(0);
+  const [next, setNext] = useState(1);
+  const [isTransitioning, setIsTransitioning] = useState(false);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setIsTransitioning(true);
+
+      setTimeout(() => {
+        setCurrent(next);
+        setNext((next + 1) % images.length);
+        setIsTransitioning(false);
+      }, 2000);
+    }, 20000);
+
+    return () => clearInterval(interval);
+  }, [next]);
+
+  return (
+    <div className="backgroundContainer">
+      <div
+        className="bgImage"
+        style={{ backgroundImage: `url(${images[current]})` }}
+      />
+
+      <div
+        className={`bgImage fade ${isTransitioning ? "active" : ""}`}
+        style={{ backgroundImage: `url(${images[next]})` }}
+      />
+    </div>
+  );
+}