About

Friday, July 24, 2020

Pausing a GIF with details/summary

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.



source https://css-tricks.com/__trashed-26/

No comments:

Post a Comment