javascript - React Spring：如何在自定义组件中应用视差

Question

我想对我的英雄部分的背景图像应用视差效果，就像在这个动画中一样：https ://dribbble.com/shots/7135284-homepage-for-aa-Saas-company-bubblz 。

我将整个部分包裹在一个 Parallax 组件中，并将 ParallaxLayer 放在我的图像标签周围。

问题是该部分根本不显示。

我尝试将 Layer 组件放在父组件之外，但结果是一样的。

function HeroSection() {
 return (
  <>
   <Parallax pages={3} scrolling>
         <div className={HeroStyles.hero}>
          <div className={cx(HeroStyles.container, 'large-container')}>
            <div className="row">
              <div>
                <h1>Title</h1>
                <p>Paragraph</p>
                <EmailForm />
                <p>Paragraph</p>
              </div>
            </div>

            <ParallaxLayer offset={0} speed={1} factor={1.1}>
              <div className={HeroStyles.bg} />
            </ParallaxLayer>
          </div>
         </div>
   </Parallax>
  </>
 );
}

感谢您的帮助！

Answer 1

<Parallax>转换为<div>with position: absolute。所以你可能需要将它包装在一个position: relative带有显式的元素中height。