"use client"; import { useScroll, useTransform } from "motion/react"; import { useRef } from "react"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; export const ParallaxScroll = ({ images, className, }: { images: string[]; className?: string; }) => { const gridRef = useRef(null); const { scrollYProgress } = useScroll({ container: gridRef, // remove this if your container is not fixed height offset: ["start start", "end start"], // remove this if your container is not fixed height }); const translateFirst = useTransform(scrollYProgress, [0, 1], [0, -200]); const translateSecond = useTransform(scrollYProgress, [0, 1], [0, 200]); const translateThird = useTransform(scrollYProgress, [0, 1], [0, -200]); const third = Math.ceil(images.length / 3); const firstPart = images.slice(0, third); const secondPart = images.slice(third, 2 * third); const thirdPart = images.slice(2 * third); return (

{firstPart.map((el, idx) => ( thumbnail

))}

{secondPart.map((el, idx) => ( thumbnail

))}

{thirdPart.map((el, idx) => ( thumbnail

))}

); };

Parallax Scroll

Instalação

Dependências