Parallax for Background Image With Content On Top

[c0d3ster]

Hello,

I was curious as to if you could provide an example where the background image is the component and the content inside the image area scrolls naturally. Prior to this library, I was using CSS to parallax the background image which made it easy to put regular HTML content on top; however, I don't think that approach works with this library due to the fact that your parallax content must live inside the Parallax component.

[jscottsmith]

@c0d3ster If I understand you correctly you should be able to create the effect with this lib, it just takes a little more effort and the right CSS. Check this CodePen out for an example of how to set it up and see if it's the effect you are looking for.

[jscottsmith]

Just a note to myself to add that Demo to the README.

[c0d3ster]

Ahhh, perfect! I didn't have the proper styling set for the children to be absolutely positioned within a relatively positioned container div. This is slightly different than using the syntax presented in the readme, so it would definitely be helpful to add this. My project has one Landing component which is similar to your HeroBanner; however, each Section after the Landing does not need parallax. I'm getting errors when putting them directly as children into the ParallaxProvider
<ParallaxProvider className="app-container"> <Landing/> <Section/> <Section/> </ParallaxProvider>
I noticed that you wrapped your HeroBanner inside a main html element. Would you advise going with that approach (even though those elements don't need parallax) or just keeping them outside the provider altogether?

[c0d3ster]

Also, I think it would be really useful if you were to export that HeroBanner as part of the v2 library calling it something like ParallaxBackground. This would allow us to create some preset customizations for common background set ups using boolean props
<ParallaxBackground opacityScrollPreset> <Children/> </ParallaxBackground> or <ParallaxBackground yScrollPreset> <Children/> </ParallaxBackground>

Maybe that's dumbing down the library too much, but it's just a thought I had when putting this together on v1.

[jscottsmith]

Ah, ya. <ParallaxProvider> is meant to wrap a single (usually top level component) like <App>. For instance if you have a simple app with routes you might have something like this:

// Top level component that won't unmount when changing views
const AppContainer = () => (
    <ParallaxProvider>
        <App>
            <Routes />
        </App>
    </ParallaxProvider>
);

// Example Route View and a component with some parallax.
const Landing = () => (
    <div>
        <HeroBanner />
        <Foo />
        <Bar />
    </div>
);

<ParallaxProvider> shouldn't be nested deep within the app -- at least there's no reason to do so. It's job is just to provide context to the controller when needed by a <Parallax> component. It won't cause any performance issues by wrapping elements without parallax, if that's the concern.

If you continue having trouble you can share the repo with me and I'll take a look.

I think it would be really useful if you were to export that HeroBanner as part of the v2

Completely agree and it's already in the works on my local repo for v2 😃

[c0d3ster]

awesome, thanks for the quick response. I'm looking forward to being able to access that isInView prop in my render callbacks. I have a header that needs to appear as a fixed element, but only once the user has scrolled to where a section is in view.

[jscottsmith]

You could use this for such a feature: react-observed (shameless self promotion). It's what I'm using in v2 to determine visibility and it's just a really simple component using the IntersectionObserver API. There's probably others out there too or you can just roll your own.

[c0d3ster]

oooo, very nice... would I just wrap my Section component in an Observed component then use the callback to render the Header only when Section isInView?

[jscottsmith]

Yup, that sounds right. It just observes whatever element the ref is mapped to and toggles a boolean when entering/leaving the view (depending on observer options). So you could use that boolean to trigger a state change or dispatch an action in your app.