时间戳

首页 > 解决方案 > React and Parallax : 单击页面内导航链接时出现错位的视差图像

javascript - React and Parallax : 单击页面内导航链接时出现错位的视差图像

问题描述

我正在使用一个名为 Rellax 的 React 库在我的网站上实现视差效果。当我滚动到页面的那个部分时，它工作得很好。但是，当我单击导航栏并导航到特定的#section 时，这个非常视差的图像漂浮在与它应该放置的位置完全不同的距离上。

我感觉这与元素的位置计算方式有关，因为我的页面结构没有单一的主体，而是一组反应组件。

其他视差库也出现了同样的问题。

现在我指的是视差组件：（代码是缩写的，只显示我提到效果的部分）

export default function Advantages() {
  useEffect(() => {
    // init parallax
    new Rellax('#parallaxImage', {
      center: true,
    });
  });
  return (
    <section>
        <img 
          id="parallaxImage" 
          className="w-100" 
          data-rellax-speed="2" 
          src={ traktor }
          alt="tractor parallax" />
   </section>
)}

标签： javascriptcssreactjsparallax

解决方案

你不应该只调用一次（通过添加方括号）吗？

useEffect(() => {
  // init parallax
  new Rellax('#parallaxImage', {
    center: true,
  });
}, []); // <-- Empty array

推荐阅读