推荐关注
› Meteor
› JSLint - a JavaScript code quality tool
› jsFiddle
› D3.js
› WebStorm
推荐书目
› JavaScript 权威指南第 5 版
› Closure: The Definitive Guide
› Closure: The Definitive Guide
这是一个创建于 2387 天前的主题，其中的信息可能已经有所发展或是发生改变。
类似 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. 变化和延迟速率。
不了解这个技术，搜索一些描述性关键词，查不到结果。请问这是如何控制实现的？
 |
1
azh7138m 2017-10-06 21:51:40 +08:00 via Android
|
 |
2
xieranmaya 2017-10-06 22:31:34 +08:00
transition timing function
beizer curve |
 |
3
islujw OP @xieranmaya 这是规定了动画的方法，那如何实时触发动画呢？可以看到 translate 的 Y 值是作为 HTML 的 DOM 不断在改变的，也就是说很可能是通过 js 来改变这个值，且值和元素所处的页面高度百分比有直接关系。如果我设置了 animation，那动画是既定而无法交互的；如果设置 transition，那么要有触发方式，例如 hover 或改变 class，这里应该是页面滑动造成的高度百分比改变，去改变 translate 的 Y 值，在这个前提下，再考虑 beizer curve 的设置。
|
|
4
islujw OP @azh7138m 这个好像好似根据光标的位置来触发的？实际上例子中的是根据页面滑动来触发的（元素所在的页面高度百分比发生变化）。
|
|
8
islujw OP @azh7138m 直觉这些都加上，页面效率会变得很低吧，配置一般的电脑估计打开网页都转风扇了。我想 Apple 网页上那么多内容，应该是有更轻量的解决方案的。总之先感谢了！
|
|
12
islujw OP @azh7138m 这次又发现新的一个网页： https://www.apple.com/watch/apple-heart-study/ 这个也是随着元素所在的高度变化，相应控制 css 的相关值。高度百分比，对应值，这个是核心。你之前提供的方法，似乎就比较局限了。
|
Select Language