search

rrutsche / react-parallax

A React Component for parallax effect
MIT License
855 stars 76 forks source link

Parallax Effect On Div or Component #51

Closed danielnuwin closed 5 years ago

danielnuwin commented 6 years ago

Is it possible to use the effect if I don't use a background image but just the content of a component?

rrutsche commented 6 years ago

You can use the Background component and insert it as a child of the Parallax. Anything that is placed inside it will have the parallax effect.

<Parallax>
  <Background>
    Your component or div goes here
  </Background>
</Parallax>

The general positioning of this Background component is not as exact as the normal background image but you could give it a try. The other option is to use the new renderLayer prop. It has a parameter with the actual relative position. So you can do your own positioning there.

<Parallax
  renderLayer={percentage => 
    <div style={
      {top: percentage * 100 /*...or some other calculation with percentage*/}
      }>
    </div>
  }
>
  <div>some content here</div>
</Parallax>