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