[Support] - Using ParallaxBanner

[patrickliang]

Hi,

I am experimenting with using ParallaxBanner to achieve similar effect like below:

https://codesandbox.io/s/vibrant-joana-8imhis

The example above is using https://www.npmjs.com/package/react-parallax. I am trying to see if it is possible to achieve it using this library, as I really like the many other parallax features this library has.

I tried using ParallaxBanner which kind of works but the result isn't quite the same. Any suggestions will be appreciated.

Regards
Patrick

[J Scott Smith]

Yes that's possible, just use a layer with an image and speed less than zero.

<ParallaxBanner
  layers={[{ image: image1, speed: -50 }]}
  style={{ height: 500 }}
>
  <div className="textContainer">
    <div className="text">HTML inside the parallax</div>
  </div>
</ParallaxBanner>

Here's a demo: https://codesandbox.io/s/react-scroll-parallax-backgrounds-q3klcf?file=/src/App.tsx

Where did you get stuck? I wan't to make sure this is straightforward in the documentation as this is a pretty simple setup.

[patrickliang]

Thanks for the quick response and the demo, it is exactly what I am looking for!

So that part that got me stuck or confused, as it turned out, was the correct value to set for the speed prop. For some reason, it never occurred to me to set a value less than -20 (yeah, I don't know why).

[J Scott Smith]

No worries! If there's a place where this can be clarified in the docs please let me know.