Adobe 的 HTML5 实验

        尽管 HTML5 技术差不多已经将 Adobe 的 Flash 逼上了绝路，但这并不意味着 Adobe 要始终与 HTML5 为敌。相反，Adobe 现在也是 HTML5 技术的主要支持者之一。

        Adobe 的 Web 平台团队正在实施一些新的图形特性，并在一个网页中通过讲故事的形式展示出来，你可以直接在 thegraphicalweb.com 中观看，也可以通过这个视频来观看。

        该项目使用到的技术主要包括：

        1.   SVG（Scalable Vector Graphics，可缩放矢量图形）

        由于 SVG 的扩展性以及易于与 CSS/ JavaScript 操作特性，该技术被贯穿使用在 thegraphicalweb.com 网站中。其中动态 SVG 创建和动画效果，基于一个流行的 SVG 数据可视化库 D3.js。D3在该网站中主要用于在背景中生成群山的形状。

        2.   CSS3 和 SASS

        在网站中，主要使用 CSS Animation和 Transforms 属性来实现闪烁和移动效果，这些属性被应用到内联 SVG 的路径和元素上。SASS 是构建于 CSS 之上的元语言，扩展了 CSS3，增加了规则、变量、混入、选择器、继承等特性。该网站主要使用 Sass 来生成良好格式化的 CSS 代码。

        3.   2D Canvas

        在网站中，使用 Processing.js 来实现一个粒子系统，通过切换点阵的组合形式，来呈现一个说话的人脸效果。

        4.   着色器

        该网站使用了一个自定义的 GLSL 着色器，来实现 WebGL 场景中发光的背景效果。通过 CSS Filter Lab 这个工具，编写自定义着色器的难度大大降低。

        此外，该网站还使用 3D Transforms 来实现场景旋转、缩放效果，使用 HTML5 Audio 来播放音频。

        该网站的源码托管在 Github，感兴趣的 Web 开发者可以下载学习。

        演示网站：thegraphicalweb.com

        项目源码：https://github.com/adobe/graphicalweb-keynote