上周我休假时，在一个海滩小礼品店里，他们卖着一本非常酷的大厚书，叫做 Ocean: A Photicular Book。你可能以前见过类似的东西……一张塑料卡片，根据你观看的角度显示不同的图像。这本书做得非常棒，图像质量很高，而且书籍的设计使得图像在翻页时会移动。
这里有一个简短的视频
看看这本书，它太酷了 pic.twitter.com/isRLATp9im
— Chris Coyier (@chriscoyier) 2017 年 4 月 13 日
这里有 Dan Kainen 的解释
Photicular，也称为透镜式或整合摄影，最早是在 20 世纪初提出的，但基本概念早在 1692 年就已经存在，当时一位法国画家创作了当观察者走过时会显示一个图像，然后又显示另一个图像的绘画。最简单的形式是将两张图像切成细长的垂直条，然后交错排列，并在复合图像前面放置一个像篱笆一样的横条平面，这样一次只能通过间隙看到一张图像。除了横条之外，还可以使用透镜，并且可以交错排列两个以上的图像——多达几十个。
最终的呈现效果在《海洋》这本书中非常棒。在推特上提到这本书后，我听说 Safari 版 也不错。我相信它们都非常棒。几乎就像哈利波特里的报纸和绘画！
当然，这让我思考如何在网页上实现类似 Photicular 的效果。我们有网页视频和 GIF，所以制作移动图像并不难。但让这些书变得酷的不仅仅是运动本身，而是它**随着你的动作（翻页）而移动**。
也许我们可以让用户滚动时翻阅 GIF 图像。你可以以编程方式控制当前显示的 GIF 帧吗？有点。没有简单的原生技术可以做到这一点，但有一些替代方案。
Dennis Gaebel 写了一篇关于技术的文章，他在去年 Capser Mattress 网站上看到了这项技术。
除了 GIF，你还可以使用图像精灵，并在滚动时切换显示图像的哪一部分。他的最终演示在这里
查看 Pen 如何使用 ScrollMagic 为喝咖啡的精灵制作动画 by Envato Tuts+ (@tutsplus) on CodePen.
如果你真的想坚持使用 GIF，BuzzFeed 实际上创建了一个名为 libgif-js 的 JavaScript 库，专门用于以这种方式控制 GIF。通过这个库，你可以跳转到特定帧，像视频一样暂停和启动 GIF，甚至可以使 GIF“可擦拭”，这意味着在 GIF 上左右拖动可以向前和向后擦拭 GIF。
为了更上一层楼，这里有一个我玩“可擦拭”GIF 的 GIF
相关
十年前，我记得我的老老板 Tim Chatman 为我们的一位客户设计了一个纸质翻页书。
它不是 Photicular，但它使用了相同类型的开槽纸标签，你可以拉动它们使图像改变。
我也想起我童年最喜欢的书之一，Dinnertime，书中不同的动物在翻页时会跳出来。
很棒啊，Chris，我从没想过我会在 css-tricks 的帖子中看到这本书！
我的伴侣找到了这本书和 Safari 版，我们三岁的儿子非常喜欢这两本书。这个运动真的很有意思。我认为还有 Polar 版，可能还有另外一两本，但我不能确定。
我一直是各种艺术和运动技术的爱好者，我从平面设计领域的艺术背景开始，然后进入网页开发。这些书很棒。我上一次查看的时候有四本，值得投资。Polar、Safari、Jungle 和 Ocean。我也很想用网页技术探索这个想法，使用 gig 和精灵，或者如果可能的话，使用其他技术；) 还有一种方法是在框架中使用垂直安装在板子上的条带，从一侧可以看到一个视图，从另一侧可以看到另一个视图，亲眼看到非常棒！
我两岁的女儿非常喜欢我们为她买的圣诞节礼物——Jungle 版。有了平板电脑和周围所有令人惊叹的技术，让我惊讶的是，如此低技术的东西仍然能激发年幼孩子的兴趣。我记得多年前 CSS Zen Garden 中有一个设计，它使用带有渐变的图像（如果我没记错的话）来打开深海潜水员的探照灯，当您向下滚动页面时。
另一种“运动”书籍是“scanimation”，scanimationbooks.com/the-books/gallop/……几年前我确实为一个网站做过这个，但我不喜欢这种效果（太不稳定了），所以我跳过了。
[开始“关于 Scanimation”：]
这些书籍中“运动”的原理如下：假设你想要使用五个帧来构成动画。然后你有一个前置“蒙版”（通常是黑色的），它由四个小单元宽的垂直条组成，后面跟着一个单元宽的空隙。现在，取你的目标图像，将它们切成 1 个单元宽的垂直条，并保留每五个条中的一个……然后通过依次取五个图像中的一个条来创建一个组合图像。[好吧……大约是；相邻帧之间留一些黑色空间来分隔它们？……买一本这样的书，把它拆开看看实际的运作方式，但这太可惜了。]
为什么它起作用呢？因为如果你将蒙版放在组合图像上，整齐地对齐，那么只会显示五个图像中的一部分；将蒙版向左或向右移动，就会显示另一个图像的部分。因为它是一个黑色蒙版，露出白色图像的小部分，所以你的大脑会将它们粘合在一起形成形状。蒙版线是垂直的，因为图像附着在书籍的（垂直）脊柱上，逐渐翻动页面会使图像进一步滑动，并显示“下一个”帧——最终“循环”回到第一个帧（但向左移动了五个单位）。
[结束“关于 Scanimation”：]
……
所以，我用两个图像做了同样的事情：对于蒙版，使用一个小的 GIF 或 PNG，其中包含水平的 1 像素白色条纹，位于 position:relative 和中等 z-index（在背景之上，但在文本之下），并且在 x 和 y 方向上重复。然后作为背景图像（使用 position:fixed 并在两个方向上重复），我在一个白色背景上交错排列了项目名称的两个词——在“奇数”行上使用一个词（例如“TRUTH”），在“偶数”行上使用另一个词（例如“JUSTICE”）。这意味着在滚动时，它会在两个词之间快速模糊或交换，你的眼睛无法区分；但在滚动结束时，它会显示其中一个词，具体取决于你的滚动是否偶然停留在偶数或奇数像素上（如果你使用了两个图像）。使用更宽的条带会减慢效果，但我认为它将用途有限。
我尝试过的另一种稍微令人满意一点的变体是交错排列相同图像的不同颜色变体：蓝色和红色……在滚动时，它看起来是灰色的，然后滚动结束时，它会随机变成蓝色或红色。我认为它看起来是灰色是因为它很微弱（这对背景来说是可以的）——你正常图像的一半被丢弃在交错排列中，被（这里）替换为白色；正是这两者叠加在一起。改进之处在于颜色在跳动，而形状保持不变。
我认为第一个变体可能有一些用途，如果你有一个公司标识（和/或口号）由两个部分组成，每个部分都代表着某些含义，并且风格是低保真的：假设它是“RELIABLY FAST”，用于提供安全的快递服务，标识由一个勾号（表示“可靠”）和一个闪电符号（表示“快速”）组成。总而言之，它必须足够微弱，以免过于分散注意力。
嘿，别开枪……我出于某种原因，将设计发展到了另一个方向。
Pitchfork 上关于 Bat for Lashes 的这篇文章至今仍然是我见过的最好的例子之一。它不仅立即引人注目，而且以印刷无法做到的奢华方式增强了访谈效果。它是在网页上制作长篇帖子更易读、更具吸引力的绝佳方式。
http://pitchfork.com/features/cover-story/reader/bat-for-lashes/
荷兰史基浦机场拥有世界上最大的透镜式图像，它是一整面墙。它太棒了，我希望这个月能去看一看。多年来我一直是透镜式图像的粉丝，它们太迷人了。
透镜墙 的实际效果（youtube）