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.86k stars 158 forks source link

How to implement breakpoint for startScroll and endScroll #167

Closed aryabeth closed 2 years ago

aryabeth commented 2 years ago

Can we add break point value for startScroll and endScroll?

i'm implement this code but it doesn't work on mobile and HD screen, i think because scroll value is different on mobile and HD Screen.

<Parallax
    translateX={[-10, 0]}
    opacity={[0.2, 1]}
    startScroll={4000}
    endScroll={4800}
  >
        <MyComponentHere />
</Parallax>
jscottsmith commented 2 years ago

@aryabeth startScroll and endScroll will change dramatically based on screen size. You must calculate them yourself and provide different values based on your requirements. This is kind of a last resort for users with highly custom needs.

You're probably better off using a targetElement positioned with CSS. This way it will resize and update with the browser window and you won't need to manually calculate the startScroll, endScroll.

Some examples and links to the docs:

https://codesandbox.io/s/react-scroll-parallax-target-element-m635p5 https://react-scroll-parallax-v3.surge.sh/?path=/story/components-parallax-vertical-scroll--with-defined-target-element https://react-scroll-parallax.damnthat.tv/docs/usage/parallax-props#configuration-props