我无法找到此技术的名称,也无法找到有关主题的任何读物。所以我在这里问。
基本上有一些页面让我们滚动行为,以不同的时间或速度移动图像/或部分网页。
示例是http://areyousage.com - 页面滚动就像向上翻页一样。
我不想要为我做所有事情的答案,但要以这种技术或一套技术的名义,所以我可以自己研究和编码。
进一步研究的方向。
答案 0 :(得分:2)
基本机制称为视差滚动,其中图像/文本/其他layereed内容的不同元素以不同的速率滚动,以给出景深或感知改变的错觉。
这也可以通过堆叠背景图像,使用不同的z索引并使用不同的速度/方向/过渡等动画来实现,并通过鼠标移动或滚轮触发移动。
在示例中,您提供了一个在滚动时触发以移动图像的转换:
transition-duration: 0ms; transform: translate3d(0px, -316px, 0px);
translate3d函数有三个参数 - 每个轴一个,x,y和z
此特定示例有效,因为正在转换的图像的高度为316px,因此效果是当您滚动时它向上移动并移出hte视口。实际上,它向上移动了与其高度相同的量,因此它似乎消失了。
请注意,这不是视差滚动 - 这是一种html5 / css机制,使图像看起来像是在移动并显示堆栈中的下一个图像。