Parallax - change scale/direction/rotation #1877
Replies: 3 comments
-
Can someone answer this question?? thanks |
Beta Was this translation helpful? Give feedback.
-
This functionality would be really useful |
Beta Was this translation helpful? Give feedback.
-
hi! this seems somewhat related to #1878, but since others jumped in here, I can repeat some of it, but with more stuff. we don't have an API for a feature like this out of the box (yet), so the only way to do it currently would require some set up on your side. So basically you have to:
An example set-up, to make a const ExampleApp = () => {
const parallax = useRef(null)
const [rotate, setRotate] = useState(0)
const PAGES = 3
useEffect(() => {
const handleScroll = (e) => {
const height = parallax.current.space
const scrollablePages = PAGES - 1 // because you can't scroll past the last page
const scrollHeight = height * scrollablePages
const scrollTop = e.target.scrollTop
const percentScrolled = scrollTop / scrollHeight
const currentPage = Math.floor(percentScrolled * scrollablePages)
const currentPageScrollTop = scrollTop - (height * (currentPage))
const currentPagePercent = currentPageScrollTop / height
// because the ParallaxLayer below has an `offset` of `0`
if (currentPage === 0) {
setRotate(currentPagePercent)
}
}
const container = parallax.current.container.current
container.addEventListener('scroll', handleScroll)
return () => {
container.removeEventListener('scroll', handleScroll)
}
}, [])
return (
<Parallax ref={parallax} pages={PAGES}>
<ParallaxLayer>
<div
style={{ transform: `rotate(${rotate * 360}deg)` }}
/>
</ParallaxLayer>
</Parallax>
)
} This is, admittedly, ugly. It relies on inner state that isn't completely documented and requires boilerplate. I have an idea for a feature to make this easier, but I've been sort of busy and haven't had time to organize my thoughts for an RFC. As for the second question -- you would do something similar to the above, except you'd probably want a |
Beta Was this translation helpful? Give feedback.
-
Hi,
I'm trying to work out how to change an objects attributes as the user scrolls. E.g have text slide off at a diagonal or have an image shrink as it slides out of view. Apologies if I'm missing something obviously but I can't see any info on this in the docs - they only seem to cover vertical or horizontal scrolling and sticking.
Also on the point of horizontally leaving the page, how can i make something leave exactly horizontally and not end up having it be a diagonal movement thanks to the page also going up at the same time?
thanks
Alex
Beta Was this translation helpful? Give feedback.
All reactions