I created this Parallax Image component with gsap. You can use whenever you want in your webapp, just import and use like this 👇

<ParallaxImage src={'/image.jpg'}/>

First install the gsap library

npm i gsap

If you use in React just remove the Image import and use normal <img> tag

import React, { useRef } from "react";
import { useEffect } from "react";
import gsap from "gsap";
import Image from "next/image";

const ParallaxImage = ({ src }) => {
  const imageRef = useRef();

  useEffect(() => {
    const ScrollTrigger = require("gsap/ScrollTrigger");
    gsap.registerPlugin(ScrollTrigger);

    const image = imageRef.current;

    gsap.to(image, {
      yPercent: 35,
      ease: "none",
      scrollTrigger: {
        trigger: image,
        start: "top bottom",
        end: "bottom top",
        scrub: true,
      },
    });
  }, []);

  return (
    <figure className="relative isolate inset-0 overflow-hidden w-full h-full">
      <Image
        ref={imageRef}
        className="image h-[150%] absolute object-cover bottom-0 left-0"
        src={src}
        blurDataURL={src}
        placeholder="blur"
        alt="My photo"
        width={1000}
        height={1000}
      ></Image>
    </figure>
  );
};

export default ParallaxImage;

Chill, hehe !