瑪麗.皮克斯 (Merry Pixmas)

Merry Pixmas 螢幕截圖

摘要

Merry Pixmas:運用 3D CSS 變形服務歡慶聖誕佳節。

我們喜歡什麼?

適合在電腦和行動裝置上順利運作的聖誕節主題示範。甚至提供全新的主題色彩支援,以及啟動全螢幕模式的主畫面體驗。

專家級提示:搖動手機即可下雪!

可能的改善項目

雖然我知道這是試用版,但針對資產和非算繪禁止 JavaScript 指定的快取標頭,或許可以改善感知的載入時間。

吉姆沙維奇的問答時間

為什麼要建立網站?

東京,我們長期以來一直致力於倡導回應式和行動版網站,而不是基於原生的理由。Pixmas 在專案之間停機期間的成果 來自 HTML5 和 CSS3 的實驗我們不斷嘗試新事物來保持知識的最新狀態。因此,對於我們的前端開發人員團隊,任何研究皆以網路為重,而不是原生平台。

隨著瀏覽器不斷發展,我們逐漸看到更多原生類似的功能;先前只能透過原生開發方式使用的函式 (例如地理位置、相機存取權、本機資料庫儲存空間等) 可為使用者帶來與原生相似的體驗,但跨平台和疊代開發的優點。當然,原生開發仍然有其優勢,在處理新專案時,需要將許多網頁和原生選項納入考量。聽起來也許很清楚,但對於我們的客戶而言,建議最好是最適合該工作的平台,不要使用我們偏好的任何程式碼編寫每個專案。

哪些技術在開發過程中表現優異?

我認為 Pixmas 的主要重點在於 3D 變形,以及我們實際推送 CSS 的程度,因此像素化的插圖風格就是在瀏覽器中表現得很好,而且任何前端開發人員都會告訴您,瀏覽器自然行為更適合方形!所以若能結合平方類問題的整體風格和 3D 數學,可以獲得不錯的效果使用 3D 轉換建立立方體,使用 HTML 比其他原始形狀更加輕鬆。不過,由於互動和動畫要經過一點時間的試驗和錯誤,才能順利解決問題。

我們最驚訝的是,這些 3D 在行動裝置上的 3D 流暢性和瀏覽器效能,尤其在比較少數的 Android 裝置上更是如此。

如果你可以有其他 API 來改善應用程式,那會是什麼呢?

如果要再次編寫 Pixmas,我們可能會使用採用 WebGL 技術的 API。 儘管透過 CSS 在 3D 中操控 HTML DOM 元素相當有趣,但網頁式 3D 真正的功用必須是 WebGL 等專屬硬體加速技術。CSS 3D 適用於基本的網頁效果和轉換,但在編寫 Pixmas 時,瀏覽器效能絕對會受限。

Google 透過 Chrome 實驗提供了一些實用的 WebGL 專案。