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

islujw · 2017-08-12T16:32:53Z

在电脑上浏览 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 这是如何实现的？继续往下滑，在「还能让 Siri 解决更多问题吗？没问题。」那个区块，不停歇的 Siri 动画，这又是如何实现的（应该不是图片吧）？

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

This topic created in 3221 days ago, the information mentioned may be changed or developed.

在电脑上浏览 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

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