Based on the full page version Scroll driven animations.

With a few changes to the original, this version works in a 'scrolling div' instead of being full page with the body scrolling.

In 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).

I have also added a 'popover' for all images, so click/tap any image to see a full screen version which also stops the background from scrolling.

The main problem I had with the conversion to work in a 'scrolling div' was the use of .slides {overflow:clip;}. In the original version this was .columns {overflow-y: hidden;}

But using {overflow:hidden;} stopped the reverse scroll from working, however, to my amazement, {overflow:clip;} restored the reverse scroll.

I have also used cqh and cqw values for the slides to keep it all in shape when resizing.