React Spring : How to apply parallax inside custom component

Question

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 !

MisterGreen · Accepted Answer · 2020-01-20 15:57:35Z

3

<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.

answered Jan 20, 2020 at 15:57

MisterGreen

1514 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Spring : How to apply parallax inside custom component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related