there is an awesome page I dying to find a way to make the same quality as this page in the below
sorry i can not attach links but just type ( Why Notre-Dame Was a Tinderbox) in google it nytimes page .
I just want to know, what technology has been used
please guys
The core piece of tech is WebGL, which is being used via the ThreeJS library to render the 3D view (& interactions).That view uses scroll events to trigger behaviour.
Don’t know if I came across this on the forums here or maybe a reddit post but this does the job.
https://www.wappalyzer.com/download
They have a browser extension but what I like better is the Bookmarklet.
Just drag the Wappalyzer button to your bookmarks bar and you can click it on any webpage to display the tech stack and you don’t have to install anything!
Just an addendum to what I wrote — it’s ThreeJS, + it seems like it’s using jQuery for DOM interaction — the NYT does this a lot, it has a well established part of the org that works to build interactive digital stuff.
Snow Fall is the famous one that won a load of prizes. It’s kinda the thing that kicked off this style of reporting (matching the journalism with lots of data, which the developer/s who work with the journalist/s render out in interesting ways to support and illustrate the story). The Simone Biles one from 2016 is another good example. All the annotated Mueller stuff that’s obvs still ongoing. The Guantánamo Docket.
Note they’re all unique — there isn’t some overarching framework they all use or whatever, they’re all hand-built things.
So for the Notre Dame article, there’s a load of data, and there’s a 3D model of the cathedral, drawn in some modelling software. That gets rendered to an HTML <canvas> element. ThreeJS, as the name suggests, is a library to deal with 3D in JS. It is used to handle the movement, rotation, highlighting etc., the whole thing is an animation that happens in order.
There is a story here, that reads from top to bottom: this one goes into detail about each issue. But as you scroll down the story, instead of the page just scrolling down, it scrubs through the 3D animation.