April 13, 2025
Scrollytelling progress
Yesterday I added the outline that I wrote and researched and I figured I could also keep a running document of the building of the website so far. To be fair, this doesn’t take into account the entire D3.js setup I had for the force-directed graph with nodes representing people and events in computing history, which was prototype 1? 0.5? But I’ve scrapped that prototype in favor of this scrolly storytelling approach, which appears a whole lot simpler to people but is really pushing the limits of my coding capabilities, even with the help of AI. It’s really making me reconsider my decision to make my project more meaningful at the expense of it seeming less impressive.
- Translated my script into a code-readable markup language JSON file, with each text element turning into a ‘step’
- Used ArchieML and Google Cloud APIs authorized client… still confused on this part, might run into issues in deployment
- Implementing scrollytelling with Scrollama.js and Inspection Observer
- Event handlers: onStepEnter, onStepExit, and onStepProgress to respond to scroll positions
- Background image setup with crossfade CSS animations
- Dynamic image management with an imageData object that associates steps with corresponding images and customized threshold positions
- handleProgressImages() function evaluates current scroll position against defined thresholds
- DOM manipulation used to create, position, and remove images based on scroll position
- Element positioning algorithm with coordinate mapping and randomization, so multiple images can popup for one step
- Animation with CSS keyframes and class-based animation triggers
- Progress monitoring which checks where the step is in the viewport and controls element visibility based on conditional logic
- Random optimization stuff I don’t understand that well — GPU acceleration, image preloading system, etc