Why is the Parallax scrolling not working? (Next.js Image Tailwind)-CodePudding

What did I miss to make parallax scrolling working?

<div className="h-screen">
  <div className="relative h-full w-full bg-cover bg-fixed bg-center bg-no-repeat">
    <Image src="https://images.unsplash.com/photo-1454496522488-7a8e488e8606?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw=&ixlib=rb-1.2.1&auto=format&fit=crop&w=1955&q=80'" objectFit="cover" alt="test" layout="fill" priority={true} />
  </div>
</div>

CodePudding user response：

To make parallax scrolling work, you need to add a parallax attribute to the div element containing the Image component, and set its value to the speed at which you want the parallax effect to occur. For example:

<div className="h-screen" parallax="0.5">
  <div className="relative h-full w-full bg-cover bg-fixed bg-center bg-no-repeat">
    <Image src="https://images.unsplash.com/photo-1454496522488-7a8e488e8606?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw=&ixlib=rb-1.2.1&auto=format&fit=crop&w=1955&q=80'" objectFit="cover" alt="test" layout="fill" priority={true} />
  </div>
</div>

The value of the parallax attribute can be any number between 0 and 1, with 0 representing no parallax effect and 1 representing the maximum parallax effect. The value you choose will depend on your personal preference and the specific design of your website. You may need to experiment with different values to find the one that looks best.

CodePudding user response：

I think instead of Image component you should apply backGroundImage style to the div where you used bg-fixed class.

Parallax scrolling is a web design technique in which the website background moves at a slower pace than the foreground.

If you visit tailwindcss:

Utilities for controlling how a background image behaves when scrolling.

 <div
        className="relative h-full w-full bg-cover  bg-center bg-fixed bg-no-repeat"
        style={{
          backgroundImage: `url(https://images.unsplash.com/photo-1454496522488-7a8e488e8606?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw=&ixlib=rb-1.2.1&auto=format&fit=crop&w=1955&q=80')`,
        }}
      ></div>

I created a component to test it out:

const Test = () => {
  return (
    <div className="h-screen">
      <div className="p-5 text-2xl bg-purple-300 bg-opacity-50 rounded-xl">
        Welcome to my site!
      </div>
      <div className="p-5 text-2xl bg-purple-300 bg-opacity-50 rounded-xl">
        Welcome to my site!
      </div>
      <div className="p-5 text-2xl bg-purple-300 bg-opacity-50 rounded-xl">
        Welcome to my site!
      </div>
      <div className="p-5 text-2xl bg-purple-300 bg-opacity-50 rounded-xl">
        Welcome to my site!
      </div>
      <div
        className="relative h-full w-full bg-cover  bg-center bg-fixed bg-no-repeat"
        style={{
          backgroundImage: `url(https://images.unsplash.com/photo-1454496522488-7a8e488e8606?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw=&ixlib=rb-1.2.1&auto=format&fit=crop&w=1955&q=80')`,
        }}
      ></div>
      <div className="p-5 text-2xl bg-purple-300 bg-opacity-50 rounded-xl">
        Welcome to my site!
      </div>
      <div className="p-5 text-2xl bg-purple-300 bg-opacity-50 rounded-xl">
        Welcome to my site!
      </div>
      <div className="p-5 text-2xl bg-purple-300 bg-opacity-50 rounded-xl">
        Welcome to my site!
      </div>
      <div className="p-5 text-2xl bg-purple-300 bg-opacity-50 rounded-xl">
        Welcome to my site!
      </div>
    </div>
  );
};

export default Test;