Hacker News new | ask | show | jobs
by niwork 2086 days ago
Know of any libraries that will achieve this kind of parallax scrolling-to-reveal rather than just scroll between pages?
1 comments

No libraries off the top of my head. I know w3[.]css[0] has one example page[1] with a parallax , but I don't know if that's what you're looking for.

LineageOS[2] has a site with a decently readable source code. They also don't have exactly what you are looking for, but the <img> with id="rotate-on-scroll" (The spinning phones) and the related script[3] look like they could somewhat related -- you could probably change the transform in the script to accomplish what you're looking for.

[0] https://www.w3schools.com/w3css/

[1] https://www.w3schools.com/w3css/tryw3css_templates_parallax....

[2] https://lineageos.org/

[3] view-source:https://lineageos.org/ (lines 1247-1263)

Thanks for the pointers.

Achieving the parallax seems to be easy enough, but combining it with all these aminations seems a bit more tricky. The animations are more complex than animate.css's approach of just animating when the component is displayed - you can play the animation in reverse by scrolling up rather than down.

I've seen the New York Times and BBC produces stories told in that parallax / animated type way and it's very effective. I'm guessing therefore that they use a standard parallax approach and them one or more animation libraries together; I was hoping there was one neat library that brought it all together but maybe that's asking for too much.