Usage clarifications about react-scroll-parallax HOT 5 CLOSED

@oyeanuj Let me know if you end up using this package and need more help.

from react-scroll-parallax.

@jscottsmith Thanks for your help! it seems like I might not need this at the end of the day. I am going to try a couple of things and see how it goes.

from react-scroll-parallax.

@oyeanuj thanks for trying it out!

So, if I understand correctly, you want the first "FullViewport" image to be fixed to the window while the proceeding content would scrolls over top? If that is the case, I'm not sure this library is needed at all -- but maybe I don't completely understand.

Just in case, let me address some of your questions.

Assuming the setup is correct

From the structure you shared this looks setup correctly.

Without adding any offset props, nothing really happens. But I wasn't clear about what those props do. Could you clarify the purpose and the application of each of the prop? In other words, what do they affect?

Yup, without any props nothing will happen 😄 . I'll try to clarify what these props do: Given the following offset props offsetYMin={-100} and offsetYMax={100}, the component will translate along the y-axis from -100px to 100px over the course of its visibility within the viewport. offsetXMin and offsetXMax will do the same except along the x-axis. You probably already have, but please take a look at this example as it allows you to adjust these props and see how things are affected. Inspecting these <Parallax> components using the React Developer Tools will also help you see how these props work.

If I move my <Parallax /> to be the parent of <BackgroundImage /> rather than <FullViewport /> that breaks my image since it seems to break the height and width of the container. Is that to be expected?

If the height of the container is determined by the <FullViewport> component then yes this is to be expected. I think you have it correct in the initial example. <Parallax> components take on the height of their children just like normal <div>s

Is the setup correct? Or would you achieve the same effect in a different manner?

I think I need an example/demo/design of what you are trying to achieve to be able to help any further. I'm happy to provide a demo of how to achieve an effect but I'll need some more clarification first.

from react-scroll-parallax.

@jscottsmith Thank you for the quick response, and the explanation. I can try and describe my experience and have whipped up a quick JSFiddle of my setup. Maybe I can try and create a gif or design to explain it as well but thought I'll give this a shot first.

My usecase is that I have an full width image (let's call it the ImageContainer) on the homepage that I am trying to have another full viewport container (let's call it the OverlayContainer) scroll on top of. I need this OverlayContainer to be slightly opaque so one can see the image beneath it.

Then once the overlay is on top of the image, I am looking for the page to scroll normally. On scroll up, I am hoping to visually undo the overlay scrolling off the image and have the image revealed.

Here is a JSFiddle that shows that layout visually - https://jsfiddle.net/3vbeah2h/3/

Hope that helps clarify it - if not, I'll try to share some design that would help. I was still at the first part of that experience trying to get the overlay to go over the background image.

To your original point, do you think this library is even needed at all?

from react-scroll-parallax.

Hmm, so based on that description I think you want to transition from a fixed position to a normally scrolling position. If that is the case you don't need this package. You'll need to track the scroll state with a listener and toggle a class from being fixed to relative on your image/div. This library won't help you with any of that unfortunately.

On the off chance I still misunderstand, are you looking for an effect like this example? It's the only other guess I could come up with based on the demo/description, but it is doable with this lib as you can see in the pen.

from react-scroll-parallax.