作者:Chris Coyier
翻译:疯狂的技术宅
https://css-tricks.com/reduce…
未经允许严禁转载
你有没有看到过这样一种简洁的技术,它基于 prefers-reduced-motion
媒体查询,将 <source media="">
用于 <picture>
元素来提供动图(或不提供动图)?
当我们在 newsletter 上分享这种方法之后,得到了 Michael Gale 的有趣回复:
喜欢 GIF 动画,但又不想让 UI 在变得花里胡哨的人该怎么办?让他们被迫在内容和界面之间做出选择吗?
我认为这是一个非常有趣的问题。
此外,这段时间每当看到 <img src="gif.gif">
时,我的大脑被触发到 如果是 MP4 会怎样?!总的来说,这是因为我确信从整体上来说在 Web 上视频要比 GIF 具有更多的优势。事实证明,有些浏览器会在 <img>
元素中支持视频,不管你信不信,你可以为 <picture>
元素写下后备方案!
让我们把所有这些东西结合起来。
添加 MP4 源
最简单的方法是在 picture 中添加一个额外的 <source>
。这意味着我们需要三个源媒体文件:
- 当
prefers-reduced-motion
为reduce
时启用的后备非动画图片。 - 动画 GIF 作为默认值。
- 如果支持后备,则用 MP4 视频替换 GIF。
例如:
<picture>
<source srcset="static.png" media="(prefers-reduced-motion: reduce)"></source>
<source srcset="animated.mp4" type="video/mp4">
<img srcset="animated.gif" alt="animated image" />
</picture>
在 Chrome 的默认条件下,只会下载并显示 GIF:
在 Safari 的默认条件下,仅下载并显示 MP4:
如果你在 Chrome 或 Safari 中激活了 prefers-reduced-motion: reduce
(在 Mac 上,可以通过:系统偏好设置→辅助功能→显示→减弱动态效果 进行设置),两个浏览器都只下载静态的 PNG 文件。
我在测试 Firefox 时,发现它似乎不起作用,继续下载 GIF 版本。Firefox 似乎支持 prefers-reduced-motion
,也许它只是目前不支持 <source>
元素?我不确定这究竟是怎么回事。
使用工具把提供的单个动画源生成其他动画源是一件很酷的事情!我打赌你可以用 Cloudinary 之类的东西来解决这个问题。
添加显示动画版本的切换按钮
就像 Michael Gale 所说的那样,你可能完全无法看到动画版本,因为你可能已经减弱了动画效果。
添加一个 <button>
用 JavaScript 得到媒体查询并强制浏览器显示动画版本应该是很容易的。
我很确定没有什么好的办法在 HTML 中以声明方式执行此操作。我们也不能把这个按钮放在 <picture>
标签内。即使 <picture>
不是替换元素,浏览器仍然会感到困惑并且不喜欢它。甚至根本不会渲染它。这没什么大不了的,我们还可以使用包装器。
<div class="picture-wrap">
<picture>
<!-- sources -->
</picture>
<button class="animate-button">Animate</button>
</div>
我们可以将按钮放在图像顶部的某个位置。这只是一个随意的选择 —— 你可以把它放在你希望的任何地方,或者甚至可以让整个图像都可以点击,只要你认为可以向用户解释清楚。请记住,只有在同一媒体查询匹配时才能显示按钮:
.picture-wrap .animate-button {display: none;}
@media (prefers-reduced-motion: reduce) {
.picture-wrap .animate-button {display: block;}
}
单击(或点击)按钮时,我们需要删除媒体查询以通过下载动画源来启动动画。
let button = document.querySelector(".animate-button");
button.addEventListener("click", () => {const parent = button.closest(".picture-wrap");
const picture = parent.querySelector("picture");
picture.querySelector("source[media]").remove();});
以下是演示:
CodePen 上的演示:https://codepen.io/chriscoyie…
也许这是一个很好的组件?
我们可以用 web 组件自动包含按钮、按钮样式和功能。嘿,为什么不呢?
CodePen 上的演示:https://codepen.io/chriscoyie…
本文首发微信公众号:前端先锋
欢迎扫描二维码关注公众号,每天都给你推送新鲜的前端技术文章
欢迎继续阅读本专栏其它高赞文章:
- 深入理解 Shadow DOM v1
- 一步步教你用 WebVR 实现虚拟现实游戏
- 13 个帮你提高开发效率的现代 CSS 框架
- 快速上手 BootstrapVue
- JavaScript 引擎是如何工作的?从调用栈到 Promise 你需要知道的一切
- WebSocket 实战:在 Node 和 React 之间进行实时通信
- 关于 Git 的 20 个面试题
- 深入解析 Node.js 的 console.log
- Node.js 究竟是什么?
- 30 分钟用 Node.js 构建一个 API 服务器
- Javascript 的对象拷贝
- 程序员 30 岁前月薪达不到 30K,该何去何从
- 14 个最好的 JavaScript 数据可视化库
- 8 个给前端的顶级 VS Code 扩展插件
- Node.js 多线程完全指南
- 把 HTML 转成 PDF 的 4 个方案及实现
- 更多文章 …