Fatal编程技术网
  • javascript/
  • Javascript React Spring：如何在自定义组件中应用视差

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

javascript reactjs gatsby

Javascript React Spring：如何在自定义组件中应用视差,javascript,reactjs,parallax,gatsby,react-spring,Javascript,Reactjs,Parallax,Gatsby,React Spring,我想对我的英雄部分的背景图像应用视差效果，就像在这个动画中一样： 我将整个部分包装在视差组件中，并将视差层放在我的图像标签上 问题是该部分根本不显示 我试着把图层组件放在外面，放在父组件中，但结果是一样的 function HeroSection() { return ( <> <Parallax pages={3} scrolling> <div className={HeroStyles.hero}> &l

我想对我的英雄部分的背景图像应用视差效果，就像在这个动画中一样：

我将整个部分包装在视差组件中，并将视差层放在我的图像标签上

问题是该部分根本不显示

我试着把图层组件放在外面，放在父组件中，但结果是一样的

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

函数段（）{
返回(
标题
段落

段落

);
}
谢谢你的帮助

转换为带有
位置的
：绝对
。因此，您可能需要将其包装在一个元素中，该元素的位置为：relative，高度为explicit