V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
islujw
V2EX  ›  JavaScript

如何做出这种浮动效果?

  •  
  •   islujw · 2018-05-11 22:18:26 +08:00 · 5929 次点击
    这是一个创建于 2386 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    再比如:

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

    的开头和最后的 MacBook 图形。

    19 条回复    2018-05-15 19:03:25 +08:00
    lzvezr
        1
    lzvezr  
       2018-05-11 22:22:29 +08:00
    技术角度来说用了 translateY 变换
    美术角度来说用了阴影
    q9REUgpVVCU77pWj
        2
    q9REUgpVVCU77pWj  
       2018-05-11 22:56:18 +08:00
    macbook 那个,还特地用一个`hero_mask_large.svg`来优化,还是挺细致的。
    islujw
        3
    islujw  
    OP
       2018-05-12 00:36:57 +08:00
    @lzvezr @q9REUgpVVCU77pWj 谢谢,意思是,如何随着网页的滚动,变换这个值,并且有一定的延迟(以达到浮动的感知)?
    oswuhan
        4
    oswuhan  
       2018-05-12 01:15:41 +08:00
    用户滚动页面触发了预定义的 DOM 事件,事件的回调函数执行一系列修改 CSS 或 classname 的操作,相关的动画效果可以由 CSS3 实现也可以由 DOM API 实现
    oswuhan
        5
    oswuhan  
       2018-05-12 01:23:33 +08:00
    我猜你不是想问技术原理层面的东西,而是想问动画设计思路,比如动画延迟时间的把握,再比如元素偏移范围的设计原理,如果真是想问这个……我只能说,这就是一种随机的、感性的、经验性等多种因素影响下的设计,没有规律、原理可循,更没有万能的控件、框架、库一类的东西。
    islujw
        6
    islujw  
    OP
       2018-05-12 03:15:09 +08:00
    @oswuhan 是技术层面的。不是修改 CSS 达成的,这个属性的改变是直接在节点属性中变化的,所以应该是 JS 在控制。有无类似的 JS 方案?
    h1367500190
        7
    h1367500190  
       2018-05-12 04:31:08 +08:00
    可以请教该帖下的各位大神:
    https://www.v2ex.com/t/454048
    Raincal
        8
    Raincal  
       2018-05-12 06:57:25 +08:00
    视差滚动效果 ant design 首页也用了 你可以去看下
    learnshare
        9
    learnshare  
       2018-05-12 08:06:30 +08:00
    window.addEventListener('scroll', (event) => { // 修改样式 });
    m31271n
        10
    m31271n  
       2018-05-12 10:39:32 +08:00
    像 @learnshare 说的,监听 scroll 事件,然后在回调中判断 BOX 是否进入了 Viewport 的可视范围,进入可视范围后,通过 CSS / JS 实现动画效果。

    + CSS 动画效果无非就是 transition blablabla。
    + JS 动画的话可以试试 anime.js 。
    rabbbit
        11
    rabbbit  
       2018-05-12 12:03:53 +08:00   ❤️ 3
    q9REUgpVVCU77pWj
        12
    q9REUgpVVCU77pWj  
       2018-05-12 13:42:22 +08:00
    哇~ @rabbbit 这个啥工具啊?还是把代码贴网页?
    kuleyu
        13
    kuleyu  
       2018-05-12 14:12:00 +08:00 via Android
    @rabbbit "web maker" + 1
    kuleyu
        14
    kuleyu  
       2018-05-12 14:21:22 +08:00 via Android
    @q9REUgpVVCU77pWj “ web maker ”一个 Chrome 扩展,不过现在也有单独的单页应用了 https://webmakerapp.com/app/ 很实用。
    agdhole
        15
    agdhole  
       2018-05-12 17:14:47 +08:00
    q9REUgpVVCU77pWj
        16
    q9REUgpVVCU77pWj  
       2018-05-12 18:00:26 +08:00
    @kuleyu 可以可以。试了下,好像我用 sublime text 分栏,再加一个自动刷新的 js,也能达到类似效果。
    islujw
        17
    islujw  
    OP
       2018-05-15 18:58:18 +08:00
    @Raincal 谢谢,但这不是视差滚动,而且有延迟效果。
    islujw
        18
    islujw  
    OP
       2018-05-15 19:00:35 +08:00
    @agdhole 谢谢,那个帖子就是我发的,问到延迟的时候,就再也没人能答上来了……所以又发了一次。
    islujw
        19
    islujw  
    OP
       2018-05-15 19:03:25 +08:00
    @rabbbit 谢谢,但这个方法没法达到目标哦。添加 class 都只是一次性的触发动画,但题目中说的,是直接和距离有关的,滚动的距离多少,直接决定了元素移动多少位置,并且不是立即移动,而是有延迟。所以,不可以使用改变 class 的方法。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1924 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 16:18 · PVG 00:18 · LAX 08:18 · JFK 11:18
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.