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,也能达到类似效果。
|