新一代網路版面配置 - 國家地理森林巨人

Christopher Gammon
Christopher Gammon

運用 CSS 和瀏覽器版面配置的工具,就能為網頁內容提供精彩的視覺效果。使用 CSS 濾鏡、WebGL、HTML5 影片、SVG、畫布等網路功能,以及 CSS 區域、CSS 形狀和 CSS 自訂濾鏡等新興技術,可大幅擴展創作空間。長久以來,Adobe 一直與熱愛版面配置和設計的內容創作者合作,因此積極將這項知識應用於網路,並為許多不斷演進的網路標準做出貢獻。

在 National Geographic 的協助下,我們使用該頻道「森林巨人」的內容,建立原型,展示這些功能如何支援豐富的網頁版面配置和回應式技術。本文將說明我們如何建構網站的幾項特別有趣的特色。如要簡要瞭解相關資訊,請觀看下方影片,Christian Cantrell 會逐一介紹網站的各項功能。

版面配置的細微差異

要如何打造出色的版面配置,以及相關功能,可能不容易看出差異,因此我們建立了「編輯器疊加層」,以便突顯較值得注意的功能。如要啟用編輯標記,請按一下文章底部的列。

編輯器標記圖片

版面配置獨立

在現今的網頁中,版面配置通常由內容決定,容器會配合文字內容垂直放大。建立複雜版面配置時,文字或其他內容的變更可能會對整體版面配置造成不必要的影響,導致需要根據意外變更重新設計內容。透過區域,我們可以將元素定義為內容,然後指定要讓內容流經的版面配置部分,進而真正將內容與版面配置分開。

在「森林巨人」的例子中,我們將故事包含在單一元素中。接著,我們在整個網頁中加入版面配置架構,其中包含相片和文字區域。我們會使用 CSS 定義要讓內容流經的元素。當複製作業到達元素結尾時,系統會繼續執行 DOM 順序中的下一個元素。這樣一來,我們就能在設計上發揮創意,根據設計偏移並調整欄位的高度,無須擔心文字會超出元素的高度。這也讓我們可以在版面配置中加入元素 (例如全寬圖片),同時讓故事持續流動。

#storyContent {
    flow-into: story;
}
.story {
    flow-from: story;
}

在上述 CSS 中,我們會建立名為「story」的流程。這個命名流程的內容是 ID 為 "storyContent" 的元素。然後會流經所有類別名稱為 "story" 的元素。CSS 區域是回應式設計的絕佳工具,可讓您在大型螢幕上使用多欄和偏移欄等功能,打造豐富的版面配置,同時在小螢幕上調整為單欄版面配置。您也可以使用回應式單位 (例如 vw 或 vh) 設定區域大小。這可確保版面配置中的欄不會超過檢視區高度,且不必擔心內容會遭到截斷,因為內容會自然流入區域鏈結中的下一個元素。

開頭大寫

使用 CSS 排除條件,我們就能在不規則形狀內或周圍套用文字。這對設計裝飾 (例如首字母上抬) 來說相當實用。開頭大寫是常見的設計手法,故事或章節的第一個字母會放大,讓其餘文字環繞字母的輪廓。這項效果與內嵌內容在浮動內容周圍換行的效果非常相似,但在排除條件中,我們不再受限於矩形框。在浮點值上使用 shape-outside,我們可以定義幾何形狀,讓內容緊密包覆字元的形狀。

.drop-caps {
    height: 100px;
    width: 100px;
    float: left;
    shape-outside: ellipse(50%, 50%, 50%, 50%);
}

這會建立橢圓形,讓內容可環繞圓形形狀。此外,由於我們使用的是形狀的相對單位,因此變更元素大小時,形狀的大小也會隨之變動。

開頭大寫字母圖片

形狀

除了首字母上標之外,排除條件還可讓您使用 shape-inside 在圖形內換行文字。我們在整個網站上都使用這項功能,尤其是在大型圖片說明文字中,利用相片的負空間來框住文字。這項功能還可讓我們沿著其他圖片和圖形的輪廓斷行,模擬先前在網路上難以實現的版面配置。

您也可以使用相對單位定義形狀,讓形狀與回應式版面配置搭配運作。這樣一來,我們就能根據容器或檢視區域來拉伸形狀,甚至使用媒體查詢來完全變更或移除形狀,因為這些都已在 CSS 中定義。以下是網站中使用的多邊形形狀之一,以及定義點的值:

.shape {
    shape-inside: polygon(0 50%, 50% 0, 100% 0, 100% 100%, 0 100%);
}
CSS 形狀圖片

平衡文字

平衡文字功能會在換行時查看元素內的整個文字區塊,而不是逐字換行。這樣一來,我們就能避免出現一行只有一兩個字的情況,並在元素中以均勻的大小顯示文字。有了這麼多控制選項,我們就能輕鬆建立美觀的文字區塊,特別是短篇內容,例如引述內容或字幕。

這正是我們在文章中使用平衡文字的地方。由於這項功能是 Adobe 提出的標準,我們使用 Randy Edmunds 建立的 polyfill 來達成相同的結果。這項功能最適合用於回應式設計。調整瀏覽器大小時,您會發現區塊會繼續平衡文字,讓各行寬度大致相同。使用平衡文字 polyfill 很簡單,因為這是 jQuery 外掛程式,只要在版面配置變更時將「balanceText()」套用至選取器,就能取得平衡的文字,如下所示:

$('.balance').balanceText();
均衡的文字圖片

篩選轉場

轉場效果是引導使用者注意力的重要方式,可用於傳達網站中的狀態。我們發現,使用者捲動網站或與網站部分內容互動時,可以透過不透明度和最近推出的 3D 轉換功能,建立流暢的轉場效果和動畫。我們現在有可用於相同用途的篩選器。

在「森林巨人」中,我們使用篩選器,在某些圖片顯示時,從灰階淡出至彩色。這些濾鏡可與不透明度或其他濾鏡搭配使用,以建立複雜的圖像效果和轉場效果。我們可以利用強大的自訂濾鏡功能,加入更強烈的效果。

自訂濾鏡是使用 GLSL 編寫,與 WebGL 相同的著色語言。您可以透過 CSS 將這些著色器套用至 DOM 元素,實現複雜的混合效果和 3D 扭曲效果。在網站底部,點選「探索總統樹」後,頁面會捲起,顯示下方另一個部分。這只是一個例子,說明自訂篩選器如何讓內容之間的轉場效果更豐富。您可以使用 CSS 轉場效果製作動畫。不過,如果您想使用轉場效果無法提供的更強大動畫或互動效果,可以使用 JavaScript 設定樣式,將值傳遞至著色器,如下所示。這樣一來,您就能更精細地控制淡出效果,甚至允許使用者輸入方法來操控著色器。

function applyCurl(value) {
    $("#map").css("webkitFilter",
    "custom(url(page-curl.vs) mix(url(page-curl.fs) normal source-atop),"
    + " 50 50, transform perspective(1000) scale(1.0) rotateX(0deg) "
    + " rotateY(0deg) rotateZ(0deg), curlPosition "
    + value + " 0, curlDirection 104, curlRadius 0.2, bleedThrough 1.0)");
}

我們的篩選器會將內容轉為 GPU 上的紋理,以便套用效果。因此,我們必須確保在完成後移除,否則內容可能會模糊。

$("#map").css("webkitFilter", "none");

CSS 自訂濾鏡可啟用有趣的效果,例如頁面捲動效果,讓頁面看起來就像在翻閱實體書籍。讓網頁開發人員可以使用 GLSL 語言編寫複雜特效程式碼,並套用至網頁內容。如要進一步瞭解自訂篩選器的詳細資訊、所有參數,以及如何使用這些參數,請參閱這篇實用教學課程

翻頁圖片

在 WebGL 中預先轉譯紋理

這篇文章的亮點是「總統樹」的首張完整圖片,據信是世界上體積第二大的樹木。這張圖片是將數百張樹木相片拼接在一起,以便呈現完整畫面。我們想模擬這個過程,因此將圖片分割成許多小相片,然後飛到適當位置,組合成完整圖片。這項功能是使用 WebGL 實現的,特別是使用 Three.js 程式庫,這是圍繞 WebGL 的較高層級 API 包裝函式。

巨型樹木圖片

每當新的材質嘗試在畫面上繪製時,大量材質的算繪作業都可能迅速導致效能問題,更不用說額外的網路要求。為減少這種情況,我們盡可能讓紋理變大,並為每個圖塊進行偏移。這種技巧通常稱為「圖像貼圖」,在遊戲開發中很常見。這會導致整棵樹有三個大型紋理。為避免每次在畫面上首次顯示其中一個材質時,都會造成效能影響,我們會在動畫開始前,使用每個材質算繪 1 個像素的方塊,將效能影響移至一開始。這樣一來,即使在平板電腦上,我們也能流暢地飛越樹木並製作動畫。

為了偏移紋理,我們會變更將紋理對應至幾何圖形的 UV。在 Three.js 中,看起來會像這樣:

geometry.faceVertexUvs[0][0] = [
    new THREE.Vector2(xOffset, yOffset + 1),
    new THREE.Vector2(xOffset, yOffset),
    new THREE.Vector2(xOffset + 1, yOffset),
    new THREE.Vector2(xOffset + 1, yOffset + 1)
];

您可以看到,我們使用了紋理的 x 和 y 偏移變數。您也可以使用自訂 GLSL 著色器材質,在幾何圖形上偏移繪製座標,以達到相同效果。

實驗功能

由於示範使用的部分功能仍處於實驗階段,因此您必須使用 Chrome Canary 瀏覽本文,並啟用 這個網站中提及的所有 Chrome Canary 旗標。

安裝並正確設定 Chrome Canary 後,請查看示範。(請注意,整個專案為開放原始碼,可在 GitHub 上取得)。

結論

我們也正在研究如何在行動應用程式中使用這些功能,以便在電子書中使用。您可以看到這個原型設計的進度,以及我們如何利用不同的互動和觸控模式,在平板電腦上展示這些功能。

隨著網路瀏覽器版面配置不斷演進,我們發現使用者希望繼續享有過去閱讀內容的製作價值和版面配置品質。有了 CSS 區域、排除條件、平衡文字、自訂篩選器和 WebGL 等功能,內容創作者不必再在觸及率和設計品質之間二擇一。「森林巨人」就是未來網路的明確例子,這類網路將允許這兩種做法。