盡管HTML5技術(shù)差不多已經(jīng)將Adobe的Flash逼上了絕路，但這并不意味著Adobe要始終與HTML5為敵。相反，Adobe現(xiàn)在也是HTML5技術(shù)的主要支持者之一。

Adobe的Web平臺(tái)團(tuán)隊(duì)正在實(shí)施一些新的圖形特性，并在一個(gè)網(wǎng)頁(yè)中通過(guò)講故事的形式展示出來(lái)，你可以直接在thegraphicalweb.com中觀看，也可以通過(guò)這個(gè)視頻來(lái)觀看。
 
該項(xiàng)目使用到的技術(shù)主要包括：
 
1.SVG（Scalable Vector Graphics，可縮放矢量圖形）
 
由于SVG的擴(kuò)展性以及易于與CSS/ JavaScript操作特性，該技術(shù)被貫穿使用在thegraphicalweb.com網(wǎng)站中。其中動(dòng)態(tài)SVG創(chuàng)建和動(dòng)畫(huà)效果，基于一個(gè)流行的SVG數(shù)據(jù)可視化庫(kù)D3.js。D3在該網(wǎng)站中主要用于在背景中生成群山的形狀。


2.CSS3和SASS
 
在網(wǎng)站中，主要使用CSS Animation和Transforms屬性來(lái)實(shí)現(xiàn)閃爍和移動(dòng)效果，這些屬性被應(yīng)用到內(nèi)聯(lián)SVG的路徑和元素上。SASS是構(gòu)建于CSS之上的元語(yǔ)言，擴(kuò)展了CSS3，增加了規(guī)則、變量、混入、選擇器、繼承等特性。該網(wǎng)站主要使用Sass來(lái)生成良好格式化的CSS代碼。
 
3.2D Canvas
 
在網(wǎng)站中，使用Processing.js來(lái)實(shí)現(xiàn)一個(gè)粒子系統(tǒng)，通過(guò)切換點(diǎn)陣的組合形式，來(lái)呈現(xiàn)一個(gè)說(shuō)話的人臉效果。


4.著色器
 
該網(wǎng)站使用了一個(gè)自定義的GLSL著色器，來(lái)實(shí)現(xiàn)WebGL場(chǎng)景中發(fā)光的背景效果。通過(guò)CSS Filter Lab這個(gè)工具，編寫(xiě)自定義著色器的難度大大降低。


此外，該網(wǎng)站還使用3D Transforms來(lái)實(shí)現(xiàn)場(chǎng)景旋轉(zhuǎn)、縮放效果，使用HTML5 Audio來(lái)播放音頻。
 
該網(wǎng)站的源碼托管在Github，感興趣的Web開(kāi)發(fā)者可以下載學(xué)習(xí)。
 
演示網(wǎng)站：thegraphicalweb.com
 
項(xiàng)目源碼：https://github.com/adobe/graphicalweb-keynote