Pausing a GIF with details/summary

You are here:

Home
Latest technologies
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

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:
CodePen Embed Fallback

Categories: Latest technologies, software applications, UI / UX layout, UncategorizedBy admin August 25, 2020

Author: admin

http://skynetch.com

Pausing a GIF with details/summary

Author: admin

Related Posts