search

jscottsmith / react-scroll-parallax

🔮 React hooks and components to create parallax scroll effects for banners, images or any other DOM elements.
https://react-scroll-parallax.damnthat.tv/
MIT License
2.9k stars 158 forks source link

Position absolute and overlapping div elements while scrolling #124

Closed ekiwi111 closed 2 years ago

ekiwi111 commented 2 years ago

Trouble With Implementation

Describe the trouble you are having considering the following: I can't seem to find a way to get parallax working in the example below. I'd like to use multiple divs that overlapping each other as they are all position: absolute and get them to move while scrolling (each would contain an image). When Box component has no CSS property position: absolute it works fine, but that's not what I want. Any help appreciated!

jscottsmith commented 2 years ago

I'm not sure I understand what the end result should look like. Can you share how they should be positioned when "overlapping'? Drawing or demo?

Position absolute removes the element from the document flow, so if the child of a <Parallax /> element is absolute, there may be no height/width for the element to base the translation on.

Send me the intended end result and I can attempt to mock it up for you if it's possible.

ekiwi111 commented 2 years ago

I'm not sure I understand what the end result should look like. Can you share how they should be positioned when "overlapping'? Drawing or demo?

Position absolute removes the element from the document flow, so if the child of a <Parallax /> element is absolute, there may be no height/width for the element to base the translation on.

Send me the intended end result and I can attempt to mock it up for you if it's possible.

Thanks for your reply. So the rough idea of what I'd like to achieve is on the sketch below. A number of divs would move out of the viewport on scroll and most of them overlap at the start of the transition.

New Project

jscottsmith commented 2 years ago

Ok interesting -- It will be a little tricky to get them positioned perfectly** but if you style the <Parallax> element for positioning instead of the child box, you can probably get close. See this:

https://codesandbox.io/s/long-morning-i4w3d?file=/src/App.js

**because the elements are starting within the view they will be midway through their transition between the given values [0, 100], see this issue for more detail: #122

Something I want to allow configuration to change the above behavior in a future version #123

ekiwi111 commented 2 years ago

Thanks heaps! Exactly what I need. Also thanks for pointing at #122, was wondering that too.