如何做出这种浮动效果？

[islujw]

https://www.apple.com/cn/icloud/

这个页面的移动设备图形，像漂浮在空中一样。

再比如：

https://www.apple.com/cn/macbook/

的开头和最后的 MacBook 图形。

[lzvezr]

技术角度来说用了 translateY 变换
美术角度来说用了阴影

[q9REUgpVVCU77pWj]

macbook 那个，还特地用一个`hero_mask_large.svg`来优化，还是挺细致的。

[islujw]

@lzvezr @q9REUgpVVCU77pWj 谢谢，意思是，如何随着网页的滚动，变换这个值，并且有一定的延迟（以达到浮动的感知）？

[oswuhan]

用户滚动页面触发了预定义的 DOM 事件，事件的回调函数执行一系列修改 CSS 或 classname 的操作，相关的动画效果可以由 CSS3 实现也可以由 DOM API 实现

[oswuhan]

我猜你不是想问技术原理层面的东西，而是想问动画设计思路，比如动画延迟时间的把握，再比如元素偏移范围的设计原理，如果真是想问这个……我只能说，这就是一种随机的、感性的、经验性等多种因素影响下的设计，没有规律、原理可循，更没有万能的控件、框架、库一类的东西。

[islujw]

@oswuhan 是技术层面的。不是修改 CSS 达成的，这个属性的改变是直接在节点属性中变化的，所以应该是 JS 在控制。有无类似的 JS 方案？

[h1367500190]

可以请教该帖下的各位大神：
https://www.v2ex.com/t/454048

[Raincal]

视差滚动效果 ant design 首页也用了 你可以去看下

[learnshare]

window.addEventListener('scroll', (event) => { // 修改样式 });

[m31271n]

像 @learnshare 说的，监听 scroll 事件，然后在回调中判断 BOX 是否进入了 Viewport 的可视范围，进入可视范围后，通过 CSS / JS 实现动画效果。

+ CSS 动画效果无非就是 transition blablabla。
+ JS 动画的话可以试试 anime.js 。

[rabbbit]

[q9REUgpVVCU77pWj]

哇～ @rabbbit 这个啥工具啊？还是把代码贴网页？

[kuleyu]

@rabbbit "web maker" ＋ 1

[kuleyu]

@q9REUgpVVCU77pWj “ web maker ”一个 Chrome 扩展，不过现在也有单独的单页应用了 https://webmakerapp.com/app/ 很实用。

[agdhole]

https://www.v2ex.com/t/446394

[q9REUgpVVCU77pWj]

@kuleyu 可以可以。试了下，好像我用 sublime text 分栏，再加一个自动刷新的 js，也能达到类似效果。

[islujw]

@Raincal 谢谢，但这不是视差滚动，而且有延迟效果。

[islujw]

@agdhole 谢谢，那个帖子就是我发的，问到延迟的时候，就再也没人能答上来了……所以又发了一次。

[islujw]

@rabbbit 谢谢，但这个方法没法达到目标哦。添加 class 都只是一次性的触发动画，但题目中说的，是直接和距离有关的，滚动的距离多少，直接决定了元素移动多少位置，并且不是立即移动，而是有延迟。所以，不可以使用改变 class 的方法。