.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
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).
The above gallery has a vertical scrollbar, but the gallery scrolls horizontally.
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.