React Spring: как применить параллакс внутри пользовательского компонента - PullRequest
Новая
       103

React Spring: как применить параллакс внутри пользовательского компонента

0 голосов
/ 25 октября 2019

Я хотел бы применить эффект параллакса к фоновому изображению раздела моего героя, как в этой анимации: https://dribbble.com/shots/7135284-homepage-for-a-a-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>
  </>
 );
}

Спасибо за помощь!

...