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?
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.
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.
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/
Comments
How does one even render a page like this? I have minimal HTML and CSS knowledge and this as far as I can tell is magic
The site, pudding.cool has a how to section
https://pudding.cool/#how
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?
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/
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/
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/