簡要說明如何打造類似網路上的 Instagram 限時動態。
我想透過這篇文章和大家分享如何打造 回應速度飛快的網頁、支援鍵盤瀏覽功能,而且適用於所有 。
如果你想要親身示範 親自建構這個短片故事元件 請參閱故事元件程式碼研究室。
如果您喜歡看影片,請參考這篇文章的 YouTube 版本:
總覽
關於短片故事的使用者體驗,常見的兩個例子是 Snapchat Stories 和 Instagram 限時動態 (並非提及機群)。 一般而言,故事通常是在行動裝置上以輕觸為主的模式,方便使用者瀏覽內容 不同訂閱方案。例如,使用者在 Instagram 上開啟某位朋友的故事 然後瀏覽裡面的相片他們通常會透過 讓應用程式從可以最快做出回應的位置 回應使用者要求使用者只要輕觸裝置右側,就能直接跳到好友的 下一則報導使用者向右滑動,直接滑到其他好友。 故事元件與輪轉介面很類似,但可在使用者導覽到 多維陣列,而不是單一維度陣列。彷彿內部有輪轉介面 每個輪轉介面都有內容🤯
![使用資訊卡視覺化的多維度陣列。由左至右是一疊紫色邊框,每張卡片內有 1 百張青色邊框。清單中。](https://web.developers.google.cn/static/articles/building/a-stories-component/image/visualized-multi-dimensio-bca9c1e40444a.png?authuser=19&hl=zh-tw)
第 2 個「堆疊」報導輪轉介面
👍? 清單 (又稱「多維陣列」)
為工作挑選合適的工具
我認為,這個元件非常易於建構, 重要網路平台功能一起來介紹這些功能吧!
CSS 格線
我們的版面配置看似不高,因為這是 CSS 格狀檢視畫面 大幅提升內容呈現效果
好友版面配置
我們的主要 .stories
元件包裝函式是行動裝置優先的水平捲動檢視畫面:
.stories {
inline-size: 100vw;
block-size: 100vh;
display: grid;
grid: 1fr / auto-flow 100%;
gap: 1ch;
overflow-x: auto;
scroll-snap-type: x mandatory;
overscroll-behavior: contain;
touch-action: pan-x;
}
/* desktop constraint */
@media (hover: hover) and (min-width: 480px) {
max-inline-size: 480px;
max-block-size: 848px;
}
以下詳細說明 grid
版面配置:
- 我們會使用
100vh
和100vw
明確填滿行動裝置的可視區域,並限制電腦上的尺寸 /
用於分隔列範本和欄範本auto-flow
翻譯為grid-auto-flow: column
- 自動流程範本為
100%
,在這個範例中是任何捲動視窗寬度
對手機而言,這就像是列大小是可視區域高度 每個欄都會根據可視區域寬度顯示延續 Snapchat Story 和 Instagram 限時動態範例,每一欄都是某位好友的故事。我們希望朋友 繼續往下捲動報導 所以必須在可視區域外捲動 格狀空間會設定各種欄位,以便設定每個好友的 HTML 版面配置 打造回應式動態捲動容器格線 讓我們能集中處理整體的影響力。
堆疊
我們必須讓每個好友的故事都能處於分頁就緒狀態。 我選擇堆疊,準備製作動畫和其他趣味模式。 我說堆疊時,想看的是 不像從側面那樣那樣
透過 CSS 格線,我們可以定義單儲存格方格 (也就是正方形),其中一列
資料欄會共用一個別名 ([story]
),而每個子項都會指派給該別名
別名單一儲存格空間:
.user {
display: grid;
grid: [story] 1fr / [story] 1fr;
scroll-snap-align: start;
scroll-snap-stop: always;
}
.story {
grid-area: story;
background-size: cover;
…
}
這樣可以讓 HTML 控制堆疊順序,同時保留所有元素
資料流向請注意,我們不需要對 absolute
定位、z-index
和
我們不需要用 height: 100%
或 width: 100%
打字。父項格線
已定義故事影像可視區域的大小,因此這些故事元件都不會定義
就能填補這個星球!
CSS 捲動貼齊點
只要使用 CSS 捲動 Snap 點規格,即可採用 雙指撥動,可在捲動時將元素鎖定在可視區域在 CSS 屬性存在前 你必須使用 JavaScript,而且最不容易...退房日 CSS 捲動 Snap 要點 由 Sarah Drasner 製作而成
scroll-snap-points
樣式時水平捲動。
沒有的話,使用者就可以正常捲動畫面。安裝完成後,瀏覽器會輕輕放在每個項目上。
.stories { display: grid; grid: 1fr / auto-flow 100%; gap: 1ch; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior: contain; touch-action: pan-x; }
.user { display: grid; grid: [story] 1fr / [story] 1fr; scroll-snap-align: start; scroll-snap-stop: always; }
我選擇「捲動 Snap 點」的原因如下:
- 免費的無障礙功能,捲動 Snap 點規格是指按下 使用向左鍵和向右鍵鍵,應在貼齊點之間移動 根據預設。
- 規格不斷增加。捲動 Snap 規格的規格將取得新功能和改良項目 這意味著 我的短片故事元件可能永遠因為 執行
- 易於導入:捲動 Snap 點數是很實用的設計, 以觸控為主的水平分頁使用案例。
- 免費平台式的慣性。每個平台都會有樣式的捲動和休息時間 經過正規化的慣性,具有難以置信的捲動和休息風格。
跨瀏覽器相容性
我們在 Opera、Firefox、Safari、Chrome 及 Android 與 iOS 上都經過測試。接下來 簡述網路功能與支援差異。
雖然部分 CSS 供應商並不適用,因此目前有部分平台必須善用使用者體驗 以及最佳化調整不需要管理這些功能,也很有信心 最終會連到其他瀏覽器和平台
scroll-snap-stop
輪轉介面是使用者體驗的主要用途之一,
CSS 捲動 Snap 點規格。與短片故事不同,輪轉介面不會一直
顯示在使用者與圖片互動後的每個圖片上而這應該不是問題,
快速循環切換輪轉介面另一方面,故事最適合逐一瀏覽
這就是 scroll-snap-stop
提供的功能
.user {
scroll-snap-align: start;
scroll-snap-stop: always;
}
撰寫本文時,scroll-snap-stop
只支援以 Chromium 為基礎的
。退房日
瀏覽器相容性
。不過,這不是阻礙。這只是表示在不支援的瀏覽器上
使用者可能會不小心略過朋友。所以使用者就必須謹慎以對
我們需要編寫 JavaScript,以確保要略過的好友並未標示為已觀看。
詳情請參閱 spec
overscroll-behavior
您是否曾在短時間內
要開始捲動互動視窗的內容嗎?
overscroll-behavior
敬上
讓開發人員無法以捲動的方式
請出發。而且適合各種場合。「我的故事」元件會使用
防止額外的滑動和捲動手勢
元件。
.stories {
overflow-x: auto;
overscroll-behavior: contain;
}
Safari 和 Opera 是 2 種瀏覽器 支援, 完全沒問題這些使用者會獲得像先前一樣的過度捲動體驗 從不曾注意到這項強化功能我是個大粉絲,也喜歡 包含在我實作的每一個過度捲動功能中這是 帶來無害的附加價值,只會提升使用者體驗。
scrollIntoView({behavior: 'smooth'})
當使用者輕觸或點擊,並看過好友的故事集錦時,
現在可以移動到捲動貼齊點集中的下一位朋友了。取代為
JavaScript,我們就能參照下一位朋友,並要求使用
向下捲動到檢視畫面中這些基本概念的支援良好每個瀏覽器
向下捲動到檢視畫面中但並非所有瀏覽器都'smooth'
。這只是
會捲動至檢視畫面中,而不是貼齊
element.scrollIntoView({
behavior: 'smooth'
})
Safari 是唯一不支援此處 behavior: 'smooth'
的瀏覽器。退房日
瀏覽器相容性
。
實作
現在你知道該怎麼做了,你會怎麼做?!我們來擴展 ,瞭解建立網路世界的所有方式。建立 Glitch。 透過 Twitter 分享你的版本,我會將它新增到 請參閱下方的社群重混作品專區。
社群重混作品
- @geoffrich_,搭配 Svelte:示範和程式碼
- @GauteMeekOlsen 搭配 Vue:示範 + 代碼
- 包含 Lit 的 @AnaestheticsApp:示範與程式碼