{"id":289009,"date":"2019-06-21T08:11:08","date_gmt":"2019-06-21T15:11:08","guid":{"rendered":"http:\/\/css-tricks.com\/?p=289009"},"modified":"2019-06-21T08:11:08","modified_gmt":"2019-06-21T15:11:08","slug":"reduced-motion-picture-technique-take-two","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/reduced-motion-picture-technique-take-two\/","title":{"rendered":"Reduced Motion Picture Technique, Take Two"},"content":{"rendered":"
Did you see that neat technique<\/a> for using the After we shared that in our newsletter<\/a>, we got an interesting reply from Michael Gale:<\/p>\n What about folks who love their animated GIFs, but just didn\u2019t want the UI<\/abbr> to be zooming all over the place? Are they now forced to make a choice between content and UI<\/abbr>?<\/p><\/blockquote>\n I thought that was a pretty interesting question. <\/p>\n <\/p>\n Also, whenever I see Let’s take a crack at combining all this stuff.<\/p>\n The easy one is adding an additional For example:<\/p>\n Under default conditions in Chrome, only the GIF is downloaded and shown:<\/p>\n<picture><\/code> element with
<source media=\"\"><\/code> to serve an animated image (or not) based on a
prefers-reduced-motion<\/code> media query<\/a>?<\/p>\n
<img src=\"gif.gif\"><\/code> these days, my brain is triggered into WELL WHAT ABOUT MP4?!<\/em> territory, as I’ve been properly convinced that videos are better-in-all-ways on the web than GIFs. Turns out, some browsers support videos right within the
<img><\/code> element and, believe it or not, you can write fallbacks for that<\/a>, with — drumroll, please — for the
<picture><\/code> element as well! <\/p>\n
Adding an MP4<\/abbr> source<\/h3>\n
<source><\/code> with the video. That means we’ll need three source media files:<\/p>\n
\n
prefers-reduced-motion<\/code> is
reduce<\/code>.<\/li>\n
<picture>\r\n <source srcset=\"static.png\" media=\"(prefers-reduced-motion: reduce)\"><\/source>\r\n <source srcset=\"animated.mp4\" type=\"video\/mp4\">\r\n <img srcset=\"animated.gif\" alt=\"animated image\" \/>\r\n<\/picture><\/code><\/pre>\n