Suitable for Firefox from version 114: 'animation-timeline:scroll()' is behind the layout.css.scroll-driven-animations.enabled preference (needs to be set to true using about:config).

A variation on the previous demonstration using the same principle but having the images snap into position horizontally when scrolling vertically.

The horizontal scrolling images are held at the top of the scrolling window using position:sticky.

This uses animation-timeline:scroll() and works in all the latest browsers except iOS Safari.

Each ot the images can be click/tapped to show an enlarged image. This uses the fairly new popover style and is triggered by the button element.

The popover image has a blurred page background and stops the page from scrolling in the background.