时间戳

首页 > 解决方案 > NextJS：视差逻辑问题

javascript - NextJS：视差逻辑问题

问题描述

    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 的新手。

  1. 每当用户每 10 像素滚动到底部时，我都会尝试将月亮向左移动
  2. 当用户滚动时，我需要 h2 标题在 road.png 下滚动。
  3. 蓝天和山脉保持静止，因为上面提到的图像当前在通过 eventListener 滚动时处于活动状态。

标签： javascriptevent-handlingnext.jsdom-eventsparallax

解决方案

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

来自 React 的 useEffect ：（下面是所需的给定行）

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

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

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

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

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

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

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

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

推荐阅读