什么是在网页上滚动自定义行为的技术?

时间:2016-06-21 13:17:16

标签: javascript jquery html5 user-interface

我无法找到此技术的名称,也无法找到有关主题的任何读物。所以我在这里问。

基本上有一些页面让我们滚动行为,以不同的时间或速度移动图像/或部分网页。

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

我不想要为我做所有事情的答案,但要以这种技术或一套技术的名义,所以我可以自己研究和编码。

进一步研究的方向。

1 个答案:

答案 0 :(得分:2)

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

这也可以通过堆叠背景图像,使用不同的z索引并使用不同的速度/方向/过渡等动画来实现,并通过鼠标移动或滚轮触发移动。

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

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

translate3d函数有三个参数 - 每个轴一个,x,y和z

此特定示例有效,因为正在转换的图像的高度为316px,因此效果是当您滚动时它向上移动并移出hte视口。实际上,它向上移动了与其高度相同的量,因此它似乎消失了。

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