推荐关注
› Meteor
› JSLint - a JavaScript code quality tool
› jsFiddle
› D3.js
› WebStorm
推荐书目
› JavaScript 权威指南第 5 版
› Closure: The Definitive Guide
› Closure: The Definitive Guide
这是一个创建于 2386 天前的主题，其中的信息可能已经有所发展或是发生改变。
https://www.apple.com/cn/icloud/
这个页面的移动设备图形，像漂浮在空中一样。
再比如：
https://www.apple.com/cn/macbook/
的开头和最后的 MacBook 图形。
 |
1
lzvezr 2018-05-11 22:22:29 +08:00
技术角度来说用了 translateY 变换
美术角度来说用了阴影 |
 |
2
q9REUgpVVCU77pWj 2018-05-11 22:56:18 +08:00
macbook 那个，还特地用一个`hero_mask_large.svg`来优化，还是挺细致的。
|
 |
3
islujw OP @lzvezr @q9REUgpVVCU77pWj 谢谢，意思是，如何随着网页的滚动，变换这个值，并且有一定的延迟（以达到浮动的感知）？
|
 |
4
oswuhan 2018-05-12 01:15:41 +08:00
用户滚动页面触发了预定义的 DOM 事件，事件的回调函数执行一系列修改 CSS 或 classname 的操作，相关的动画效果可以由 CSS3 实现也可以由 DOM API 实现
|
|
5
oswuhan 2018-05-12 01:23:33 +08:00
我猜你不是想问技术原理层面的东西，而是想问动画设计思路，比如动画延迟时间的把握，再比如元素偏移范围的设计原理，如果真是想问这个……我只能说，这就是一种随机的、感性的、经验性等多种因素影响下的设计，没有规律、原理可循，更没有万能的控件、框架、库一类的东西。
|
|
6
islujw OP @oswuhan 是技术层面的。不是修改 CSS 达成的，这个属性的改变是直接在节点属性中变化的，所以应该是 JS 在控制。有无类似的 JS 方案？
|
 |
7
h1367500190 2018-05-12 04:31:08 +08:00
可以请教该帖下的各位大神：
https://www.v2ex.com/t/454048 |
 |
8
Raincal 2018-05-12 06:57:25 +08:00
视差滚动效果 ant design 首页也用了 你可以去看下
|
 |
9
learnshare 2018-05-12 08:06:30 +08:00
window.addEventListener('scroll', (event) => { // 修改样式 });
|
 |
10
m31271n 2018-05-12 10:39:32 +08:00
像 @learnshare 说的，监听 scroll 事件，然后在回调中判断 BOX 是否进入了 Viewport 的可视范围，进入可视范围后，通过 CSS / JS 实现动画效果。
+ CSS 动画效果无非就是 transition blablabla。 + JS 动画的话可以试试 anime.js 。 |
 |
11
rabbbit 2018-05-12 12:03:53 +08:00  3
 |
|
12
q9REUgpVVCU77pWj 2018-05-12 13:42:22 +08:00
哇～ @rabbbit 这个啥工具啊？还是把代码贴网页？
|
 |
14
kuleyu 2018-05-12 14:21:22 +08:00 via Android
@q9REUgpVVCU77pWj “ web maker ”一个 Chrome 扩展，不过现在也有单独的单页应用了 https://webmakerapp.com/app/ 很实用。
|
 |
15
agdhole 2018-05-12 17:14:47 +08:00
|
|
16
q9REUgpVVCU77pWj 2018-05-12 18:00:26 +08:00
@kuleyu 可以可以。试了下，好像我用 sublime text 分栏，再加一个自动刷新的 js，也能达到类似效果。
|
Select Language