AHHHHHHH

Haruxe · Sep 4, 2023 · f0b5964 · f0b5964
1 parent c750396
commit f0b5964
Show file tree

Hide file tree

Showing 4 changed files with 392 additions and 138 deletions.
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
@@ -15,7 +15,7 @@ function Navbar() {
 
   return (
     <motion.div
-      className="fixed flex flex-col w-screen z-20 mx-auto place-content-center"
+      className="fixed flex flex-col w-screen z-40 mx-auto place-content-center"
       animate={{ y: 0 }}
       initial={{ y: -100 }}
       transition={{ duration: 0.6, type: "tween" }}
@@ -53,7 +53,7 @@ function Navbar() {
         </div>
       </motion.div>
       <motion.div
-        className={"bg-[#fdffe43d] h-[3px] rounded-xl left-0 "}
+        className={"bg-white h-[1px] rounded-xl left-0 "}
         style={{ scaleX: scrollYProgress }}
       />
     </motion.div>

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -4,23 +4,36 @@ import "../styles/globals.css";
 import type { AppProps } from "next/app";
 import { useState } from "react";
 import Image from "next/image";
-import { motion } from "framer-motion";
+import { motion, useScroll, useTransform } from "framer-motion";
 
 function MyApp({ Component, pageProps }: AppProps) {
+  const { scrollYProgress, scrollY } = useScroll();
+  const opacity = useTransform(scrollYProgress, [0, 0.3], [1, 0]);
+
   return (
     <>
       <motion.div
-        style={{
-          backgroundImage: `url("/images/Space1.png")`,
-          backgroundRepeat: "no-repeat",
-          backgroundSize: "cover",
-          backgroundPosition: "center",
-        }}
-        initial={{ backgroundSize: "cover" }}
-        animate={{ backgroundSize: "cover" }}
-        transition={{ duration: 0.5 }}
+        animate={{ opacity: 1 }}
+        initial={{ opacity: 0 }}
+        transition={{ duration: 1 }}
       >
         <div className="place-content-center place-items-center mx-auto relative">
+          <motion.div style={{ opacity }}>
+            <motion.div
+              className="fixed bg-cover bg-center bg-no-repeat z-0 w-screen h-screen quality-[100]"
+              style={{
+                backgroundImage: "url(/images/Space1.png",
+              }}
+            />
+            {/* <div className="absolute place-content-center place-items-center flex w-full h-screen">
+              <motion.div
+                initial={{ height: "100%", width: "100%" }}
+                animate={{ height: "0vh", width: "0vw" }}
+                transition={{ duration: 2, type: "tween" }}
+                className="bg-[#1a1919] m-auto flex place-content-center place-items-center"
+              />
+            </div> */}
+          </motion.div>
           <Navbar />
           <div className="max-w-[1500px] place-items-center mx-auto">
             <Component {...pageProps} />