0

I would like to apply a parallax effect to the background image of my hero section, just like in this animation : https://dribbble.com/shots/7135284-homepage-for-a-a-Saas-company-bubblz.

I wrapped the whole section in a Parallax component, and put the ParallaxLayer around my image tag.

The problem is that the section doesn't display at all.

I've tried to put the Layer component outside, in the parent component, but the outcome is the same.

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

Thanks for helping !

Kevin Nkonda
  • 33
  • 5

1 Answers1

2

<Parallax> translates to a <div> with position: absolute. So you'll probably need to wrap it in an element with position: relative with explicit height.

MisterGreen
  • 141
  • 4