Skip to content

Commit

Permalink
Add: Tested parallax effect :)
Browse files Browse the repository at this point in the history
Shubham-Patel07 committed Sep 2, 2024
1 parent 8ef9053 commit 3f2beb2
Showing 5 changed files with 168 additions and 25 deletions.
67 changes: 48 additions & 19 deletions components/MultiLayerParallex.js
Original file line number Diff line number Diff line change
@@ -1,41 +1,70 @@
import { motion, useScroll, useTransform } from "framer-motion";
import React, { useRef } from "react";
import React, { useRef, useEffect } from "react";

export default function MultiLayerParallax() {
const 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%"]);
const animationFrameRef = useRef(null);

useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => {
const updateProgress = () => {
const progress = 1 - entry.intersectionRatio;
ref.current.style.setProperty("--scroll-progress", progress);
animationFrameRef.current = null; // Clear the animation frame reference
};

if (!animationFrameRef.current) {
animationFrameRef.current = requestAnimationFrame(updateProgress);
}
},
{ threshold: Array.from({ length: 101 }, (_, i) => i / 100) }
);

observer.observe(ref.current);
return () => {
observer.disconnect();
if (animationFrameRef.current) {
cancelAnimationFrame(animationFrameRef.current);
}
};
}, []);

return (
<div
ref={ref}
className="w-full h-screen overflow-hidden relative grid place-items-center"
style={{
"--scroll-progress": 1,
}}
>
<motion.h1
style={{ y: textY }}
<h1
style={{
transform: `translateY(calc(var(--scroll-progress) * 350%))`,
}}
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"
</h1>
<div
className="absolute inset-0 z-0 mix-blend-color-dodge"
style={{
backgroundImage: `url(/image-full.png)`,
y: backgroundY,
backgroundPosition: "bottom",
backgroundSize: "cover",
transform: `translateY(calc(var(--scroll-progress) * 50%))`

}}
/>

<div
className="absolute inset-0 z-20 bg-bottom bg-cover"
className="absolute inset-0 z-20"
style={{
backgroundImage: `url(/image-bottom.png)`,
backgroundPosition: "bottom",
backgroundSize: "cover",
}}
/>
</div>
);
}
};

export default MultiLayerParallax;
58 changes: 58 additions & 0 deletions pages/testenv/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import { motion, useScroll, useTransform } from "framer-motion";
import React, { useRef } from "react";

export default function ParallaxTest() {
const ref = useRef(null);

// Use useScroll to track the scroll progress of the ref element
const { scrollYProgress } = useScroll({
target: ref,
offset: ["start start", "end end"],
});

// Transform the Y position based on scroll progress
const imageY = useTransform(scrollYProgress, [0, 1], ["0%", "-50%"]);

return (
<div style={{ height: "200vh", overflowY: "scroll" }}>
{/* Scrollable container */}
<div
ref={ref}
style={{
height: "150vh",
position: "relative",
backgroundColor: "#0a0a0a",
color: "#fff",
display: "flex",
alignItems: "center",
justifyContent: "center",
textAlign: "center",
}}
>
{/* Parallax Image */}
<motion.div
style={{
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%",
backgroundImage: 'url(/image-full.png)',
backgroundSize: "cover",
backgroundPosition: "center",
y: imageY, // Apply the Y transform
}}
/>

{/* Foreground Text */}
<h1 style={{ zIndex: 1, fontSize: "3rem" }}>
Scroll to see the Parallax Effect
</h1>
</div>
{/* Additional content to ensure scrolling */}
<div style={{ height: "100vh", backgroundColor: "#06141D" }}>
<p style={{ color: "#fff", padding: "20px" }}>More content below...</p>
</div>
</div>
);
}
68 changes: 62 additions & 6 deletions pages/work2/index.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,65 @@
import MultiLayerParallax from "../../components/MultiLayerParallex";
import { Inter } from "next/font/google";

const inter = Inter({ subsets: ["latin"] });

const work2 = () => {
return(
<div>
work2
</div>
)
return (
<main className={`${inter.className} overflow-y-auto h-screen`}>
{/* Parallax Section */}
<div className="relative">
<MultiLayerParallax />
</div>

{/* Content Section */}
<div className="w-full bg-[#06141D]">
<div className="max-w-lg space-y-4 mx-auto py-24 text-neutral-300">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam quae
earum nobis quasi repellat. Amet facere nulla dolorum accusantium
sit dolores odio excepturi facilis laboriosam officiis dolorem,
nobis reprehenderit molestiae.
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam quae
earum nobis quasi repellat. Amet facere nulla dolorum accusantium
sit dolores odio excepturi facilis laboriosam officiis dolorem,
nobis reprehenderit molestiae.
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam quae
earum nobis quasi repellat. Amet facere nulla dolorum accusantium
sit dolores odio excepturi facilis laboriosam officiis dolorem,
nobis reprehenderit molestiae.
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam quae
earum nobis quasi repellat. Amet facere nulla dolorum accusantium
sit dolores odio excepturi facilis laboriosam officiis dolorem,
nobis reprehenderit molestiae.
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam quae
earum nobis quasi repellat. Amet facere nulla dolorum accusantium
sit dolores odio excepturi facilis laboriosam officiis dolorem,
nobis reprehenderit molestiae.
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam quae
earum nobis quasi repellat. Amet facere nulla dolorum accusantium
sit dolores odio excepturi facilis laboriosam officiis dolorem,
nobis reprehenderit molestiae.
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam quae
earum nobis quasi repellat. Amet facere nulla dolorum accusantium
sit dolores odio excepturi facilis laboriosam officiis dolorem,
nobis reprehenderit molestiae.
</p>
</div>
</div>
</main>
);
}

export default work2;
export default work2;
Binary file added public/image-bottom.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/image-full.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 3f2beb2

Please sign in to comment.