Pausing a GIF with details/summary
Publikováno: 22.7.2020
Steve Faulkner has a clever idea here. You can show an (animated) GIF and overlay a pause/play button on top of it — which is really a <details>/<summary> element. When toggled, a (non-animated) JPG inside covers the GIF, effectively “pausing” it.
Adrian Roselli calls it a “quick and dirty” way to pass WCAG Success Criterion 2.2.2 Pause, Stop, Hide.
I forked it, swapped out all the images so it shows the JPG first, and put loading="lazy" on … Read article “Pausing a GIF with details/summary”
The post Pausing a GIF with details/summary appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
Steve Faulkner has a clever idea here. You can show an (animated) GIF and overlay a pause/play button on top of it — which is really a <details>/<summary> element. When toggled, a (non-animated) JPG inside covers the GIF, effectively “pausing” it.
Adrian Roselli calls it a “quick and dirty” way to pass WCAG Success Criterion 2.2.2 Pause, Stop, Hide.
I forked it, swapped out all the images so it shows the JPG first, and put loading="lazy" on the images. It seems to effectively not load the GIF until you explicitly press play, so that’s an option too:
The post Pausing a GIF with details/summary appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.