Community forum for knowledge and support

Updated 4 months ago

Scrollable Parallax Layer Animation

At a glance

The community member is looking for a Relume component similar to a scrollable parallax layer animation, where the image changes to correspond with the text as the user scrolls. They tried using Layout 515, but it didn't quite give the desired effect. Another community member suggests checking out Layout 487, and a third community member provides more detailed feedback, noting that the tricky part is that the scrolling in the example is detached from the elements on the page, unlike Relume's components which have one fixed element and one scrolling element. The third community member suggests that if the actual content of the scrolling content could be extracted and included in the fixed content, it may get closer to the desired effect, and recommends the community member try section_layout348 as the closest option.

Useful resources

Hey folks - wondering if there might be a Relume component similar to this scrollable parallax layer animation? As you scroll, the image changes to correspond with the text. I was thinking Layout 515, but doesn't quite give the effect I'm after as the image scrolls up the viewport before changing.

M
T
4 comments

@T can you provide the URL to this example - would love to see the animation - I have a hunch on a component but yeah, not sure it fits 100%.

Hi @Matt - sure, located towards the bottom at Data First Security for MultiCloud Environment | Fortanix. This one is actually just a video, but it's the only example I came across today, but have seen similar done with HTML on other sites.

Happy to do some tinkering with a component to get similar

Maybe Layout 487?

yeah the super tricky part with all of the components we have that almost fit this bill is that in your example (which is an animation by the way, not a scroll effect, which is fine) - but in that example, the scrolling is detached from the elements on the page - so in all of our components, we have one fixed element and one scrolling element, and its the scrolling element that controls the cadence of the scrolling. But if you could somehow extract the actual content of the scrolling content, but keep everything else, and then include that previous scrolling content into the fixed content...then you should be able to get pretty close. And I would think that this one would get you the closest to it:
https://www.relume.io/preview?cid=uncommon-components/section_layout348

Add a reply
Sign up and join the conversation on Slack