javascript - “不同的”视差滚动效果

Question

我正在使用我的新作品集，我想在网站上做这样的效果：

http://nizoapp.com/

当我们滚动时，iPhone 和部件从侧面出现的效果。这是一种视差滚动。

我试图搜索如何做，但我找不到。所以我“偷”了代码保存页面并调整代码，但似乎有很多不必要的东西。

有人知道我该怎么做吗？

Answer 1

视差：由于观察者位置的变化，被观察物体的表观位移。

视差是一种特殊的滚动效果，例如通过相对滚动来模拟深度。

如果您对更普遍的滚动效果感兴趣，那么简单的搜索会产生许多插件和综述。

Answer 2

据我说，这里的图片显示了这个想法是如何运作的。基本思想是所有移动的元素都与中心/非移动元素有一定的距离。当您滚动更多时，它们与该中心元素的距离会减小 - 成反比。在此处的图像中，元素用圆圈标记并为其命名（为简单起见，仅给出了一个移动元素，也可以添加其他元素）。详情如下。

这里的中心元素称为“A”，而移动的元素称为“C”。这里使用的变量：

D => 移动元素与 A k 的距离
=> 任何常数 > 1（实验以获得良好结果）
y => 滚动距离（document.body.scrollTop）
dy => A、C dx 之间的垂直距离
=> 水平距离赌注。A 和 C
theta => A、C 之间的（预定）角度

C 和 A 之间有一个角度取决于您 - 将其设置为任意数字（弧度是首选单位）。现在，随着 y 增加，D 减少。因此，D 由图中所示的关系/公式给出。每次向下/向上滚动时，都会重新计算 D。从中计算出 dy、dx 并将其设置为 C 的 css 的左上角属性（绝对定位）。如果您想知道如何找到 dy、dx，请按以下步骤操作。

dy = Math.sin(theta) * D
dx = Math.cos(theta) * D

我希望我已经给出了这个想法。我本可以给出完整的代码，但我希望你做点什么......如果你需要进一步的帮助，请在评论中提出......:)

Answer 3

基本上它使用scroll事件，然后在某些点上为盒子设置动画。