这是什么效果以及如何实现？ [关闭]答案

【问题标题】：What is this effect and how it can be implemented? [closed]这是什么效果以及如何实现？ [关闭]
【发布时间】：2016-02-24 23:52:52
【问题描述】：

今天我遇到this website (of a book) 并发现了有趣的视觉效果（我想我会称之为改变虚拟视角或类似的）。我很好奇这个效果被正确引用的术语，以及可以使用哪些前端（我假设是 JavaScript）框架、库、工具和/或语言来实现这种效果和类似效果。

【问题讨论】：

是的，那将是一个视差
@axelduch：也许吧。请查看我最初忘记包含的链接。
@axelduch：我明白了——谢谢。我听说过这个词，但不确定它是否适用于本案。那么，可以使用哪些工具来实现这种效果呢？附言哇！ -1？谁投了反对票：你愿意解释你的理由吗？
致版主：我的问题并不意味着要求提供全面的答案，因此我认为将其标记为过于宽泛并搁置是没有意义的。但是，如果你坚持这一点，我不介意......

【解决方案1】：

这是一种叫做视差的效果。它通常用于滚动网站，以产生深度错觉。

这个想法首先出现在早期的电脑游戏中，让 2D 图形具有运动感、速度感和距离感。

如果您喜欢 JavaScript 库，有很多，但其中一个比较流行的是：http://pixelcog.github.io/parallax.js/

虽然许多使用 Parallax 的网站将效果附加到滚动事件，但您提供的示例网站将事件附加到用户鼠标 X 和 Y 坐标。

【讨论】：

【解决方案2】：

看起来parallax.js 可能是一个不错的起点。如果您想自己编写代码，您可以使用几个 SVG 图层，然后根据捕获鼠标悬停事件的 X 和 Y 坐标来使用变换来移动一些图层，以计算鼠标移动。

对于稍微简单的事情（即您不想为简单的移动图像学习 SVG），我想您可以使用带有 position: absolute 的一些图像并根据鼠标位置更新它们的顶部和左侧属性。

【讨论】：