-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Loading status checks…
Add: Tested parallax effect :)
1 parent
8ef9053
commit 3f2beb2
Showing
5 changed files
with
168 additions
and
25 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.