網站示例代碼 - >來自Adobe的富有表現力的網頁

Question

我一直在關注the expressive web網站。我在google上做了一些R & D的網站，但沒有得到令人滿意的鏈接，它解釋了網站的製作方式。

雖然我知道這是在html5,css3，但我正在尋找一些示例代碼，這將幫助我做一些編碼的東西。

任何人都可以幫助我解決這個問題嗎？

Answer 1

「富有表現力的網絡」是爲了給開發人員帶來HTML5和CSS3的全新驚人的創造性可能性。但它是一個玩具的例子。底層技術就像一羣div動畫和用css轉換一樣簡單。這種任務最適合的技術是WebGL。而且，它實際上會更容易實施。

下面一些原因考慮：

• 這時HTML5 + CSS實現，很可能有大的覆蓋範圍。但是，您仍然無法在舊瀏覽器上運行它，或者使用墊片，因爲它太重，甚至在所有現代瀏覽器中都無法正常運行。因此，無論如何，你最終都會得到flash \ html5視頻回退。

• 這對DOM渲染時間確實很糟糕。

• 這樣你就會陷入簡單的幾何形狀，沒有照明效果或着色器。

• 您可以使用簡單的粒子系統或變體來實現它，幾乎所有代碼都將在GPU上執行，因此它將具有與本機代碼非常接近的性能，併爲手持設備節省電池。

• 它確實是不可擴展的。你不能只放大桌面和縮小手持設備。但是對於WebGL而言，它很簡單，包括簡化幾何。

• CSS + HTML具有性能開銷，因爲對象的每一面都是DOM的一部分。

• 沒有工具（據我所知）使用這種圖形效果的資產。但是，你可以找到大量的軟件（包括免費的）用這樣的框架的three.js所或其他常見的3D管道工具，包括非常簡單的使用聲明框架，如http://www.x3dom.org/