How does one even render a page like this? I have minimal HTML and CSS knowledge...

tim333 · on Aug 7, 2018

The site, pudding.cool has a how to section

alexpetralia · on Aug 7, 2018

I'm very curious about this as well. What JavaScript framework(s) enable this? How does it integrate with certain CSS frameworks or HTML templating languages?

jamessb · on Aug 7, 2018

This uses D3.js [1], and waud [2] for audio. The Pudding have their own library for scrollytelling (Scrollama.js [3]), but I don't think it's used in this project.

[1]: https://d3js.org/

[2]: http://www.waudjs.com/

[3]: https://pudding.cool/process/introducing-scrollama/

rayalez · on Aug 7, 2018

I don't know about this website, but you can take look at reveal.js [1]. It's a pretty powerful open source tool for making similar kind of presentations.

[1] https://github.com/hakimel/reveal.js/

r3bl · on Aug 7, 2018

From my quick inspect of the source, it seems like it's powered by D3, which is precisely what you imagine it to be: a framework for making visualizations based on Data Driven Documents (hence the D3): https://d3js.org/