"use client"; import React from "react"; import { motion, useScroll, useTransform } from "framer-motion"; const images = [ { src: "https://images.pexels.com/photos/18173391/pexels-photo-18173391/free-photo-of-modern-colonnade-along-the-street.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", alt: "Image 2", className: "col-span-1 row-span-1", }, { src: "https://images.pexels.com/photos/20988889/pexels-photo-20988889/free-photo-of-majestic-columns-of-building-in-black-and-white.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", alt: "Image 2", className: "col-span-1 row-span-1", }, { src: "https://images.pexels.com/photos/19674845/pexels-photo-19674845/free-photo-of-black-and-white-symmetrical-view-of-a-walkway-with-columns-in-city.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load", alt: "Image 2", className: "col-span-1 row-span-1", }, { src: "https://images.pexels.com/photos/22848550/pexels-photo-22848550/free-photo-of-arch-walkway-by-commerce-plaza-in-lisbon.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load", alt: "Image 2", className: "col-span-1 row-span-1", }, { src: "https://images.pexels.com/photos/21364096/pexels-photo-21364096/free-photo-of-colonnade-with-neoclassical-columns.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", alt: "Image 2", className: "col-span-1 row-span-1", }, { src: "https://images.pexels.com/photos/20087923/pexels-photo-20087923/free-photo-of-arch-and-colonnade.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load", alt: "Image 2", className: "col-span-1 row-span-1", }, { src: "https://images.pexels.com/photos/10160068/pexels-photo-10160068.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load", alt: "Image 2", className: "col-span-1 row-span-1", }, { src: "https://images.pexels.com/photos/20849698/pexels-photo-20849698/free-photo-of-colonnade-in-building-corridor.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load", alt: "Image 2", className: "col-span-1 row-span-1", }, { src: "https://images.pexels.com/photos/20989679/pexels-photo-20989679/free-photo-of-building-with-majestic-columns.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", alt: "Image 2", className: "col-span-1 row-span-1", }, { src: "https://images.pexels.com/photos/19031612/pexels-photo-19031612/free-photo-of-ruins-of-ancient-columns.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", alt: "Image 2", className: "col-span-1 row-span-1", }, { src: "https://images.pexels.com/photos/17408552/pexels-photo-17408552/free-photo-of-colonnade-of-building-in-black-and-white.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", alt: "Image 2", className: "col-span-1 row-span-1", }, { src: "https://images.pexels.com/photos/18144183/pexels-photo-18144183/free-photo-of-colonnade-near-building-wall.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", alt: "Image 2", className: "col-span-1 row-span-1", }, { src: "https://images.pexels.com/photos/22710601/pexels-photo-22710601/free-photo-of-man-walking-by-building-colonnade.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load", alt: "Image 2", className: "col-span-1 row-span-1", }, { src: "https://images.pexels.com/photos/23451982/pexels-photo-23451982/free-photo-of-man-walking-near-monumental-columns.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load", alt: "Image 2", className: "col-span-1 row-span-1", }, ]; export default function ParallaxScroll() { const { scrollY } = useScroll(); return ( <div className="container mx-auto px-4"> <div className="grid grid-cols-3 gap-10"> {images.map((image, index) => { const column = index % 3; const speed = column === 1 ? 0.5 : 1.5; return ( <motion.div key={index} className={`relative overflow-hidden rounded-2xl ${image.className}`} style={{ height: "300px", y: useTransform(scrollY, [0, 1000], [0, -200 * speed]), }} > <img src={image.src} alt={image.alt} className="absolute inset-0 w-full h-full object-cover" /> </motion.div> ); })} </div> </div> ); }

Installation