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

标签 javascript jquery html user-interface

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

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

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

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

进一步研究的方向。

最佳答案

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

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

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

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

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

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

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

关于javascript - 在网页中进行滚动自定义行为的技术是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37945574/

相关文章:

javascript - jQuery的scrollTop事件没有动画

javascript - 将文本从大写形式转换为 div 内的大写形式

javascript - 为什么我的 javascript 只在重复代码时触发?

php - 条件 CSS 停止加载内容

javascript - 在 ES6 Node.js 中导入 '.json' 扩展会引发错误

javascript - 改变元素高度的CSS动画

javascript - highcharts 热图元素不透明度变为 0

javascript - 如果未选中单选按钮,jQuery 会删除一个元素

javascript - JQuery 的 ajax 函数从 XML 中剥离 HTML 标签

javascript - 使用 jQuery 提交表单时如何完成 $.get()