Add: parallax effect foundation :)

components/MultiLayerParallex.js

@@ -0,0 +1,41 @@
+import { motion, useScroll, useTransform } from "framer-motion";
+import React, { useRef } from "react";
+
+export default function MultiLayerParallax() {
+  const ref = useRef(null);
+  const { scrollYProgress } = useScroll({
+    target: ref,
+    offset: ["start start", "end start"],
+  });
+  const backgroundY = useTransform(scrollYProgress, [0, 1], ["0%", "100%"]);
+  const textY = useTransform(scrollYProgress, [0, 1], ["0%", "200%"]);
+
+  return (
+    <div
+      ref={ref}
+      className="w-full h-screen overflow-hidden relative grid place-items-center"
+    >
+      <motion.h1
+        style={{ y: textY }}
+        className="font-bold text-white text-7xl md:text-9xl relative z-10"
+      >
+        PARALLAX
+      </motion.h1>
+
+      <motion.div
+        className="absolute inset-0 z-0 bg-bottom bg-cover"
+        style={{
+          backgroundImage: `url(/image-full.png)`,
+          y: backgroundY,
+        }}
+      />
+
+      <div
+        className="absolute inset-0 z-20 bg-bottom bg-cover"
+        style={{
+          backgroundImage: `url(/image-bottom.png)`,
+        }}
+      />
+    </div>
+  );
+}