javascript - 在网页中进行滚动自定义行为的技术是什么？

Question

我找不到该技术的名称，也找不到任何有关该主题的读物。所以我在这里问。

基本上，有些页面使用滚动行为，以不同的时间或速度移动图像/或部分网页。

示例为http://areyousage.com - 页面滚动就像向上翻页一样。

我不想要为我做所有事情的答案，而是以这种技术或一组技术的名称，这样我就可以自己研究和编码。

进一步研究的方向。

Answer 1

基 native 制称为视差滚动，其中图像/文本/其他分层内容的不同元素以不同的速率滚动，以给出景深或改变感知的错觉。

这也可以通过堆叠背景图像、具有不同的 z 索引并以不同的速度/方向/过渡等对其进行动画处理并通过鼠标移动或滚轮触发移动来松散地实现。

在您提供的示例中，有一个在滚动时触发的转换以移动图像:

transition-duration: 0ms; transform: translate3d(0px, -316px, 0px);

translate3d 函数采用三个参数 - 每个轴一个，x、y 和 z

这个特定示例之所以有效，是因为正在过渡的图像的高度为 316px ，因此效果是当您滚动时它会向上移动并移出视口(viewport)。实际上，它向上位移的量与其高度相同，因此它似乎消失了。

请注意，这不是视差滚动 - 这是一种 html5/css 机制，使图像看起来像是在移动并显示堆栈中的下一个图像。