Multi-Column Different-Speed Scrolling

The piece explores using scrolling as a way to reveal a photo gallery rather than insisting every image move at the same rate. Its first implementation uses a responsive two-column CSS grid: one column follows the page’s ordinary movement, while the other appears to drift faster. This effect does not change scrolling itself; CSS scroll-driven animations transform the images as they pass through the viewport. The images also scale and shift vertically during their passage, creating a subtle motion effect. The approach uses features such as `animation-timeline: view()` and works without JavaScript, with a single-column layout available at smaller screen sizes. Images can also open in popovers.

A more ambitious experiment makes the second column appear to scroll upward while the page moves down. To achieve this, the column is translated according to the page’s scroll position and made sticky; its starting offset is calculated so images remain visible across different viewport heights. Because sticky positioning complicates the individual image animations, those effects must be calculated separately, making this version considerably more finicky. The author presents both approaches as playful explorations of gallery navigation, not as necessary usability conventions, and points to other, more elaborate examples. A reader’s response flags a practical issue: images may lose their aspect ratios. The suggested fix preserves image dimensions with explicit aspect ratios and adjusts the column’s drift and image transforms.