Updated the footer animation

Author: divine7022

package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@docusaurus/core": "^3.5.2",
     "@docusaurus/preset-classic": "^3.5.2",
+    "@lottiefiles/dotlottie-wc": "^0.4.6",
     "@mdx-js/react": "^3.0.1",
     "@svgr/webpack": "^5.5.0",
     "clsx": "^1.1.1",

src/css/custom.css

@@ -31,6 +31,15 @@ html[data-theme="dark"] {
   border-radius: 15px !important;
 }
 
+html, body {
+  overflow-x: hidden; 
+}
+
+html, body {
+  overflow-y: scroll;
+  scrollbar-width: none;
+}
+
 /* Footer */
 
 html[data-theme="dark"] .footer {
@@ -221,3 +230,4 @@ html[data-theme="light"] .footer-logo-text {
   color: rgb(70, 203, 174);
   text-decoration: none !important;
 }
+

src/theme/Footer.js

@@ -1,20 +1,50 @@
-import React from "react";
+import React, { useEffect } from "react";
 import styles from "./Footer.module.css";
 import FooterLayout from "@theme-original/Footer";
-import { useLocation } from "@docusaurus/router"; 
+import { useLocation } from "@docusaurus/router";
 
 const Footer = () => {
   const location = useLocation();
   const isHomePage = location.pathname === "/";
+
+  useEffect(() => {
+    import("@dotlottie/player-component");
+  }, []);
+
+  useEffect(() => {
+    const navbar = document.querySelector(".navbar"); 
+    const footer = document.querySelector(".footerContainer");
+
+    if (!navbar || !footer || !isHomePage) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting) {
+          navbar.style.backgroundColor = "#61AE9D"; 
+        } else {
+          navbar.style.backgroundColor = "";
+        }
+      },
+      { threshold: 1 }
+    );
+
+    observer.observe(footer);
+
+    return () => observer.disconnect();
+  }, []);
+
   return (
-    <div>
+    <div className={`footerContainer ${ isHomePage ? styles.footerContainer : ""}`}>
       <FooterLayout />
       {isHomePage && (
-        <div className={styles.animatedFooterContainer}>
-          <div className={styles.footer_bg}>
-            <div className={styles.footer_bg_one}></div>
-            <div className={styles.footer_bg_two}></div>
-          </div>
+        <div className={styles.lottieContainer}>
+          <dotlottie-player
+            src="https://lottie.host/f466ad48-fde8-452a-aca8-2d153e8969ff/l92UT8AOsP.lottie"
+            background="transparent"
+            speed="1"
+            loop
+            autoplay
+          ></dotlottie-player>
         </div>
       )}
     </div>

src/theme/Footer.module.css

@@ -1,57 +1,22 @@
- 
-html, body {
-  overflow-x: hidden;
-}
-
-.animatedFooterContainer {
-  position: relative;
-  margin-top: 0px;
-  padding-top: 50px;
-  
-}
 
-html[data-theme="light"] .animatedFooterContainer {
-background-color: #f5f6f7;
+.lottieContainer {
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden !important; 
 }
 
-.footer_bg {
-  width: 100%;
-  height: 266px;
-  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigB8iI5tb8WSVBuVUGc9UjjB8O0708X7Fdic_4O1LT4CmLHoiwhanLXiRhe82yw0R7LgACQ2IhZaTY0hhmGi0gYp_Ynb49CVzfmXtYHUVKgXXpWvJ_oYT8cB4vzsnJLe3iCwuzj-w6PeYq_JaHmy_CoGoa6nw0FBo-2xLdOPvsLTh_fmYH2xhkaZ-OGQ/s16000/footer_bg.png") 
-      no-repeat center;
-  background-size: cover;
+.lottieContainer dotlottie-player {
+  width: 100vw !important; 
+  height: auto !important; 
+  max-height: 500px !important; 
 }
 
-.footer_bg_one {
-  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia0PYPxwT5ifToyP3SNZeQWfJEWrUENYA5IXM6sN5vLwAKvaJS1pQVu8mOFFUa_ET4JuHNTFAxKURFerJYHDUWXLXl1vDofYXuij45JZelYOjEFoCOn7E6Vxu0fwV7ACPzArcno1rYuVxGB7JY6G7__e4_KZW4lTYIaHSLVaVLzklZBLZnQw047oq5-Q/s16000/volks.gif") 
-      no-repeat center;
-  background-size: contain;
-  width: 330px;
-  height: 105px;
-  position: absolute;
-  bottom: 0;
-  animation: carMove 22s linear infinite;
+.footerContainer {
+  --ifm-footer-background-color: #61AE9D;
 }
 
-.footer_bg_two {
-  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyLGwEUVwPK6Vi8xXMymsc-ZXVwLWyXhogZxbcXQYSY55REw_0D4VTQnsVzCrL7nsyjd0P7RVOI5NKJbQ75koZIalD8mqbMquP20fL3DxsWngKkOLOzoOf9sMuxlbyfkIBTsDw5WFUj-YJiI50yzgVjF8cZPHhEjkOP_PRTQXDHEq8AyWpBiJdN9SfQA/s16000/cyclist.gif") 
-      no-repeat center;
-  background-size: contain;
-  width: 88px;
-  height: 100px;
-  position: absolute;
-  bottom: 0;
-  animation: cyclistMove 30s linear infinite;
+.footerContainer .footer {
+  --ifm-footer-background-color: #61AE9D; 
 }
-
-
-@keyframes carMove {
-  0% { left: -25%; }
-  100% { left: 100%; }
-}
-
-@keyframes cyclistMove {
-  0% { left: -25%; }
-  100% { left: 100%; }
-}
-