Visual History of Daft Punk
Overview
As a big fan of Daft Punk, I’ve always wondered about their raise to fame. What was their path from being anonymous house DJs to Grammy-winning artists? For my final project in the HCI course, “Programming Usable Interfaces”, I developed an interactive website that illustrates the history of Daft Punk. Information about the famous duo is shown in chronological order, with the first part dating back to 1987.
The timeline advances as visitors scroll further down the page. The embedded imagery and audio elevates the information to be more than just text on a page. It’s one thing to read about the history and another to actually experience parts of it.
Tools
HTML, CSS, Skrollr.js
Duration
This project took around 4 weeks to complete for the course, Programming Usable Interfaces.
Animations & Embedded Content
The biggest lesson I got out of this project was learning how to use Skrollr.js within a short period of time. I learned how to incorporate parallax scrolling effects into the text, such as transform and ease. Getting to the final version of the site took lots of trial and error but a fun process to look back on in the end.
To provide visitors with a closer understanding of the references within the text, I embedded images, videos, albums, and singles throughout the timeline. This way, visitors can listen to the actual song when its name is brought up or watch a recording of the concert instead of trying to imagine it. Linking the music and visuals was another learning experience I got out of coding this site.
The site is currently being hosted through my GitHub page. Some reference links no longer work sadly, but most of the experience is intact. To get a general sense of it all, check out the screenshots and gifs below.
🤙Enjoy my favorite Daft Punk album as you browse:
