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

macOS 的网页特效是如何实现的?

  •  
  •   islujw · 103 天前 · 1090 次点击
    这是一个创建于 103 天前的主题,其中的信息可能已经有所发展或是发生改变。
    1. 在电脑上浏览 macOS 的官网 https://www.apple.com/cn/macos/sierra/ 页面,带宽足够的时候(初始图形是毛玻璃的样子时),会加载出 3D 般的动效。随着页面的滑动,Sierra 山峰与天空之间、前后山峰之间、同一山峰的不同山脊、前方缓缓进入画面的山峰、右上角 Siri 窗口和桌面间、Dock 和桌面间……许多地方都会出现近大远小的运动视觉差。感觉整个 macOS 桌面是立体的三维世界,刚从里面游览了一番出来似的。检索网站资源,发现一些类似蒙版的图片:

      https://images.apple.com/media/ww/macos/2016/c1206bed-9b76-4c2c-ad65-d3647b9ebcbb/overview/hero/textures/mountains.jpg

      https://images.apple.com/media/ww/macos/2016/c1206bed-9b76-4c2c-ad65-d3647b9ebcbb/overview/hero/textures/mountains_alpha.png

      https://images.apple.com/cn/macos/sierra/overview/hero/ui.jpg

      https://images.apple.com/cn/macos/sierra/overview/hero/ui_alpha.png

      这是如何实现的?

    2. 继续往下滑,在「还能让 Siri 解决更多问题吗?没问题。」那个区块,不停歇的 Siri 动画,这又是如何实现的(应该不是图片吧)?

    4 回复  |  直到 2017-09-12 21:55:46 +08:00
        1
    zxyawx   103 天前
    第一个是利用多张图片缩放视差
    第二个是 canvas
        2
    shiji   103 天前
    1. 这个实在太常见了,CSS 的基础部分就能学到。

    所谓的蒙版素材:
    那些素材是可以通过 CSS 剪切成一块块的形状的。discuz phpwind 什么的都是这样。如果分开加载浪费服务器资源。
        3
    islujw   103 天前
    @zxyawx 谢啦~我先去研究一下 ^^
        4
    islujw   72 天前
    @zxyawx 我以为是 perspective 属性。因为 macOS 网页即将更新了,所以去保存一份。发现第一个也是 canvas …… 那么 perspective 也可以做到吗?
    DigitalOcean
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   鸣谢   ·   2583 人在线   最高记录 3541   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.0 · 48ms · UTC 07:39 · PVG 15:39 · LAX 23:39 · JFK 02:39
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1