NextJS: Parallax logic issue

Question

    import Head from 'next/head'
import styles from '../styles/Home.module.css'
import Image from 'next/image'
import React, { useRef ,useEffect, useState } from 'react';

export default function Home() {
  let ref = useRef()
  const [offset, setOffset] = useState();
  // const handleScroll = () => onScroll()
  // const handleScroll = () => setOffset(window.pageYOffset)

  useEffect(() => {
    window.addEventListener("scroll", handleScroll)
    return ()=> window.removeEventListener("scroll", handleScroll)
  }, []);
  
  // console.log(useEffect);
 
  return (
    <div className={styles.container}>
      <div className={styles.section}>

      <Head>
        <title>Parallax Effect</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Image className={styles.bg}
        src="/../public/bg.jpg"
        // width={2049}
        // height={2049}
        // objectFit="cover"
        layout="fill"
        quality={100}
        />
      <Image className={styles.moon}
        src="/../public/moon.png"
        // width={2049}
        // height={1152}
        // objectFit="cover"
        layout="fill"
        quality={100}
        onScroll={useEffect}
        // style={{ transform: `translateY(${offset * 0.5}px)` }}
      />
      <Image className={styles.mountain}
        src="/../public/mountain.png"
        // width={2049}
        // height={1152}
        // objectFit="cover"
        layout="fill"
        quality={100}
      />
      <Image className={styles.road}
        src="/../public/road.png"
        // width={2049}
        // height={1152}
        // objectFit="cover"
        layout="fill"
        quality={100}
      />

      <h2 className={styles.text}>Moon Light</h2>

      </div>
    </div>
  )
}

Can someone help me with this above code, I am trying to make the Images "move" when I scroll but I am unable to understand the logic behind it. I am new to React and NextJS.

I am trying to shift the moon to the left whenever the user scrolls to the bottom for every 10px
I need the h2 header to scroll under the road.png as the user scrolls.
The blue sky and the mountains remain stationary as the above mentioned images are currently active while scrolling through the eventListener.

AdamTzur AdamTzur · Accepted Answer · 2021-03-03T06:10:43

So for Parallax to work without importing or using any external parallax package. We first have to import

useEffect from React: (below is the given line required)

import React, { useEffect } from 'react';

Now for selecting each image separately in NextJS you first have to give a id for each of them, for example:

<Image className={styles.bg}
    id="bg"
    src="/../public/bg.jpg"
    layout="fill"
    quality={100}
    />

Once an id is allotted to each of the desired Image components, you must initialise a var and select it, for example:

var bg = document.querySelector('#bg');

NOTE: the above initialised variable needs to be placed into a function outside the return in your main function.

Now to manipulate each initialised variable which has now been assigned to your Image component can be done like so:

 bg.style.transform = `translateX(${window.scrollX / 2}px)`;

NextJS: Parallax logic issue

1 Answers