Hacker News Reader

Comment by qbasic_forever | Hacker News Reader

"Scrollytelling" is the nickname for this kind of presentation. There are lots of nifty js frameworks for it, check out this for an overview: https://pudding.cool/process/how-to-implement-scrollytelling...

View on HN

The nice thing with this particular website at theverge.com is that it is not scrollytelling, as it does not mess around with scrolling. That is: Nothing is moving while you scroll. Images got faded in when scrolled to (looking like good old lazy loaded images, but with intention). Maybe we could agree to call this layout a very gentle form of scrollytelling. As somebody who does not like scrollytelling so much, I really like the beautiful layout of this article.

I think your definition of storytelling is too narrow. When I took “storytelling” as a university class 20 years ago it had nothing to do with having moving parts on a website, but the concept is the same for both this article and interactive articles. Storytelling is simply a tool that enables you to tell and present a long story in a way that that makes people read all of it. I’d say this article succeeds as much as that as an interactive article would.

scrolly, not story ;)

For more detail: the 'with intention' part is using an IntersectionObserver[1] to toggle image opacity, via CSS style, when the image enters the viewport.

So the effect repeats as you scroll through the document, even after the images are first lazy loaded.

[1] https://developer.mozilla.org/en-US/docs/Web/API/Intersectio...

Reply on news.ycombinator.com