6 ms·

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

qbasic_forever 5y ago
"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/ https://pudding.cool/process/how-to-implement-scrollytelling...
- ktpsns 5y ago
  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.
  - kodemager 5y ago
    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.
    - Dah00n 5y ago
      scrolly, not story ;)
  - Brybry 5y ago
    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/Intersection_Observer_API https://developer.mozilla.org/en-US/docs/Web/API/Intersectio...
philliphaydon 5y ago
I couldn't read the whole thing because of. I didn't think it was beautiful and interactive. Each to their own.
- iJohnDoe 5y ago
  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.
  - philliphaydon 5y ago
    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)
    - kamray23 5y ago
      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.
  - MayeulC 5y ago
    Firefox Android has a reader mode. Chrome (default browser) got rid of it, probably because of conflicting interests with Google's ads and AMP.
    - The_Colonel 5y ago
      It's broken in Firefox reader view sadly. The way the images appear/disappear while scrolling makes me dizzy.
WalterBright 5y ago
Some people (like me) find it very annoying and consequently don't read it.
- INTPenis 5y ago
  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.
kamray23 5y ago
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.

qbasic_forever 5y ago

"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/ https://pudding.cool/process/how-to-implement-scrollytelling...

ktpsns 5y ago
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.
- kodemager 5y ago
  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.
  - Dah00n 5y ago
    scrolly, not story ;)
- Brybry 5y ago
  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/Intersection_Observer_API https://developer.mozilla.org/en-US/docs/Web/API/Intersectio...

philliphaydon 5y ago

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

iJohnDoe 5y ago
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.
- philliphaydon 5y ago
  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)
  - kamray23 5y ago
    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.
- MayeulC 5y ago
  Firefox Android has a reader mode. Chrome (default browser) got rid of it, probably because of conflicting interests with Google's ads and AMP.
  - The_Colonel 5y ago
    It's broken in Firefox reader view sadly. The way the images appear/disappear while scrolling makes me dizzy.

WalterBright 5y ago

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

INTPenis 5y ago
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.

kamray23 5y ago

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.