Giters

jscottsmith / react-scroll-parallax

🔮 React hooks and components to create parallax scroll effects for banners, images or any other DOM elements.

Home Page:https://react-scroll-parallax.damnthat.tv/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How to implement breakpoint for startScroll and endScroll

aryabeth opened this issue · comments

commented

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>
commented

@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