Hacker News Reader

Comment by csk111165 | Hacker News Reader

Where did you make this beautiful and interactive article? Is id done via some Web framerwork or you are just writing it in the website.??

View on HN

"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...

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.

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

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 ;)

Interactive? Perhaps it' just me, but I can tell you that to me the page was a series of sections with a lot of empty space between them and it was rather hard to read. There were some extracts on some neat ribbon-looking things as if they were lifted from newspapers, but 90% of the article was just... white.

In a way, if it is supposed to be interactive, this is a great success from my point of view. Despite being interactive, it's not an article as an application type deal where no content will load without 10 XHRs and 15 JS scripts. It's a fully working article, whether you look at it on a macbook screen or telex paper.

EDIT: Just went and printed it out.

  elinks -dump <url> | lpr.

12 sheets A4 with a reference list for visible links and all. Looks good and reads better.

I couldn't read the whole thing because of. I didn't think it was beautiful and interactive. Each to their own.

Reader View. After you scroll through the first graphics it’s easy to read in Reader View, if you have an iPhone. Not sure how it works on Android.

It helps but it's still annoying as you scroll there's 2-3 full height scrolls of just photos. (on iPhone and Firefox - Desktop)

Does not need to be. uMatrix blocks the loading of the majority of the photos and keeps them white. Even better, render the article as text and you get rid of the garbage:

    elinks <url>

Personally I even tested printing it out as plaintext

    elinks -dump <url> | lpr

12 sheets of A4 with a reference list at the end listing all the links on the page and what they point to. Beautiful article, good read.

It's great design when a telex machine can read your article as well than a modern HD screen. It's odd design when the telex becomes better at doing so.

Firefox Android has a reader mode. Chrome (default browser) got rid of it, probably because of conflicting interests with Google's ads and AMP.

It's broken in Firefox reader view sadly.

The way the images appear/disappear while scrolling makes me dizzy.

Some people (like me) find it very annoying and consequently don't read it.

Some people (like me) apparently block too much JS for it to become interactive. I just read long paragraphs of text, as it should be. There were huge gaps between the text and I tried enabling cloudflare to see if there were images there but I wasn't that interested to make the gaps appear.

Reply on news.ycombinator.com