https://www.apple.com/cn/icloud/
这个页面的移动设备图形，像漂浮在空中一样。
再比如：
https://www.apple.com/cn/macbook/
的开头和最后的 MacBook 图形。
推荐关注
› Meteor
› JSLint - a JavaScript code quality tool
› jsFiddle
› D3.js
› WebStorm
推荐书目
› JavaScript 权威指南第 5 版
› Closure: The Definitive Guide
› Closure: The Definitive Guide
This topic created in 3107 days ago, the information mentioned may be changed or developed.
 |
lzvezrMay 11, 2018
1
技术角度来说用了 translateY 变换
美术角度来说用了阴影 |
 |
q9REUgpVVCU77pWjMay 11, 2018
2
macbook 那个，还特地用一个`hero_mask_large.svg`来优化，还是挺细致的。
|
 |
3
@lzvezr @q9REUgpVVCU77pWj 谢谢，意思是，如何随着网页的滚动，变换这个值，并且有一定的延迟（以达到浮动的感知）？
|
 |
oswuhanMay 12, 2018
4
用户滚动页面触发了预定义的 DOM 事件，事件的回调函数执行一系列修改 CSS 或 classname 的操作，相关的动画效果可以由 CSS3 实现也可以由 DOM API 实现
|
|
oswuhanMay 12, 2018
5
我猜你不是想问技术原理层面的东西，而是想问动画设计思路，比如动画延迟时间的把握，再比如元素偏移范围的设计原理，如果真是想问这个……我只能说，这就是一种随机的、感性的、经验性等多种因素影响下的设计，没有规律、原理可循，更没有万能的控件、框架、库一类的东西。
|
 |
h1367500190May 12, 2018
7
可以请教该帖下的各位大神：
https://www.v2ex.com/t/454048 |
 |
RaincalMay 12, 2018
8
视差滚动效果 ant design 首页也用了 你可以去看下
|
 |
learnshareMay 12, 2018
9
window.addEventListener('scroll', (event) => { // 修改样式 });
|
 |
m31271nMay 12, 2018
10
像 @learnshare 说的，监听 scroll 事件，然后在回调中判断 BOX 是否进入了 Viewport 的可视范围，进入可视范围后，通过 CSS / JS 实现动画效果。
+ CSS 动画效果无非就是 transition blablabla。 + JS 动画的话可以试试 anime.js 。 |
 |
11
 |
3 |
q9REUgpVVCU77pWjMay 12, 2018
12
哇～ @rabbbit 这个啥工具啊？还是把代码贴网页？
|
 |
kuleyuMay 12, 2018 via Android
14
@q9REUgpVVCU77pWj “ web maker ”一个 Chrome 扩展，不过现在也有单独的单页应用了 https://webmakerapp.com/app/ 很实用。
|
 |
agdholeMay 12, 2018
15
|
|
q9REUgpVVCU77pWjMay 12, 2018
16
@kuleyu 可以可以。试了下，好像我用 sublime text 分栏，再加一个自动刷新的 js，也能达到类似效果。
|
Select Language