这种影响是什么以及如何实施？

Question

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

Answer 1

这是一种叫做Parallax的效果。它经常用于滚动网站，给人以深度的幻觉。

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

如果您使用的是JavaScript库，那么有很多，但有一个很受欢迎：http://pixelcog.github.io/parallax.js/

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

Answer 2

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

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