图像比较滑块
简介#
图像比较滑块,其起源不太可考。不过还是能找到流行的源头:ZURB。ZURB 是网页设计公司, 在开源领域也取得了不小的成就,比如响应式前端框架 foundatio。
2013年6月,ZURB 在改进 无头浏览器截图工具 时,需要展示两个图像之间的视觉差异。 而常规的方法不够有效(就像「找不同」游戏一样麻烦),于是 设计主管 推荐了加拿大鹅网站的 仿冒品对比页面。
此页面中,用户能移动滑块,精确的比对两张图片相同位置的差异。然后 ZURB 的开发者使用 jQuery 复刻了此功能, 并认为这个工具非常实用,于是在完善后开源到了 GitHub,其名为 TwentyTwenty。
附言:TwentyTwenty 的含义是指视力正常,因为 20/20 是指在 20 英尺距离,看到理论正常视力的内容,也就是 1.0 的视力。 (说明「找不同」游戏确实麻烦)
一些使用经验#
TwentyTwenty 毕竟使用的是 jQuery,占用高是出了名的,并且现在也不流行使用它。所以需要寻找替代品。
neas/img-comparison-slider 的体积很合理,不到 12 KiB, 符合现代的轻量网站需求。并且也时常维护,而 TwentyTwenty 确实多年未维护了(6 年),所以选择 ICS 很合理。
gledos 的 ICS 比较简单粗暴,需要的时候,在页面中插入 <script>
<style>
标签,然后使用下面的写法:
> [!abstract]+ 英文/中文
>
> <img-comparison-slider markdown=1>
> ![英文](en.avif){: .off-glb slot="first" }
> ![中文](zh.avif){: .off-glb slot="second" }
> </img-comparison-slider>
混杂 Markdown 写法是想让画面偏向 Markdown 一些,虽然不多,毕竟 Attribute List 的属性还是太显眼了。但 gledos 还是希望尽量以 Markdown 来写。
比起官方的写法,这里主要是增加了 .off-glb
这个 Class,目的是让 MkDocs GLightbox 插件不要影响 ICS。
然后这个 Class 还能起到防止透明图片叠在一起的情况,CSS 如下。
.off-glb{ background: var(--md-default-bg-color); }
--md-default-bg-color
是 MkDocs Material 的背景色,这样能让切换明暗主题时,也让图片的背景色保持。
演示#
寧瑠(兔女郎)/妮露(邦妮)
(由于更新时间是手动更新的,所以部分页面内容已更新,但忘记修改新的日期了……)