页面元素的滑动延迟效果是如何实现的？

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

This topic created in 3166 days ago, the information mentioned may be changed or developed.

类似 https://www.apple.com/cn/iphone-x/ 页面的 class="subsection new-features content-active element-in-view" 的部分，三个 iPhone X 图形在滑动页面的过程中，有不同程度的滑动延迟。页面滑动到不同位置时，元素 CSS 的 transform: translate 的 Y 值会按一定速率变化，且有点类似 iMessage 气泡滑动时不同起泡的延迟一样，非常舒服。

这种效果出现在很多页面，比如 Apple Watch 的图形会在滑动过程中有轻微的位置浮动，看起来像是漂浮在空气中一样。

猜测有两个关键点：1. 元素在不同高度时设置相应的 css 值； 2. 变化和延迟速率。

不了解这个技术，搜索一些描述性关键词，查不到结果。请问这是如何控制实现的？

滑动

描述性

延迟

页面

12 replies • 2017-12-07 23:18:23 +08:00

azh7138m

Oct 6, 2017 via Android

http://www.alloyteam.com/index.php?s=视差

是这种东西吗？

xieranmaya

Oct 6, 2017

transition timing function
beizer curve

islujw

Oct 8, 2017

@xieranmaya 这是规定了动画的方法，那如何实时触发动画呢？可以看到 translate 的 Y 值是作为 HTML 的 DOM 不断在改变的，也就是说很可能是通过 js 来改变这个值，且值和元素所处的页面高度百分比有直接关系。如果我设置了 animation，那动画是既定而无法交互的；如果设置 transition，那么要有触发方式，例如 hover 或改变 class，这里应该是页面滑动造成的高度百分比改变，去改变 translate 的 Y 值，在这个前提下，再考虑 beizer curve 的设置。

islujw

Oct 8, 2017

@azh7138m 这个好像好似根据光标的位置来触发的？实际上例子中的是根据页面滑动来触发的（元素所在的页面高度百分比发生变化）。

azh7138m

Oct 8, 2017 via Android

@islujw 视差滚动那三篇你真的看了吗。。。楼主莫非不是程序狗？

islujw

Oct 9, 2017

@azh7138m Sorry，只注意到了第一篇。技术只是爱好，不是职业，还请多包涵和高明指教了。

azh7138m

Oct 9, 2017 via Android

@islujw 嘛嘛，你都看完就知道了😀

islujw

Nov 1, 2017

@azh7138m 直觉这些都加上，页面效率会变得很低吧，配置一般的电脑估计打开网页都转风扇了。我想 Apple 网页上那么多内容，应该是有更轻量的解决方案的。总之先感谢了！

azh7138m

Nov 1, 2017

@islujw 这才多少节点，不会的

azh7138m

Nov 1, 2017

@islujw 苹果这个页面就是不断改变 transform translate，这属性甚至可以用 GPU 加速

islujw

Nov 17, 2017

@azh7138m 对，是这样的，但应该是 js 计算的。

islujw

Dec 7, 2017

@azh7138m 这次又发现新的一个网页： https://www.apple.com/watch/apple-heart-study/ 这个也是随着元素所在的高度变化，相应控制 css 的相关值。高度百分比，对应值，这个是核心。你之前提供的方法，似乎就比较局限了。