NextJS：视差逻辑问题答案

【问题标题】：NextJS: Parallax logic issueNextJS：视差逻辑问题
【发布时间】：2021-05-31 21:56:02
【问题描述】：

    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>
  )
}

有人可以帮我处理上面的代码吗，我试图让图像在滚动时“移动”，但我无法理解其背后的逻辑。我是 React 和 NextJS 的新手。

每当用户滚动到底部每 10 像素时，我都会尝试将月亮向左移动
当用户滚动时，我需要 h2 标题在 road.png 下滚动。
蓝色的天空和山脉保持静止，因为上述图像当前在事件监听器中滚动时处于活动状态。

【问题讨论】：

标签： javascript event-handling next.js dom-events parallax

【解决方案1】：

因此，Parallax 无需导入或使用任何外部视差包即可工作。我们首先要导入

使用效果来自 React：（下面是所需的给定行）

导入反应，{ useEffect } from 'react';

现在要在 NextJS 中分别选择每个图像，您首先必须为每个图像指定一个 id，例如：

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

一旦为每个所需的 Image 组件分配了一个 id，您必须初始化一个 var 并选择它，例如：

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

注意：上面的初始化变量需要放在主函数的 return 之外的函数中。

现在可以像这样操作每个已分配给 Image 组件的初始化变量：

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

【讨论】：

老实说，我会避免直接操作 DOM 元素并根据状态在 React 中设置翻译，例如 <Image style={{transform: 'translateX(${offset / 2}px)'}}/>
@LindaPaiste 偏移量从何而来？