捲動式動畫個案研究

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

捲動式動畫是網路上常見的使用者體驗模式。捲動式動畫會與捲動容器的捲動位置相連結。這表示當您向上或向下捲動時，連結的動畫會在直接回應中向前或向後拖曳。例如視差背景圖片或讀取指標等效果，這些圖片會在捲動時移動。

開發人員通常使用 JavaScript 來回應主執行緒上的捲動事件，以建立捲動式動畫。這會導致系統難以建立與捲動同步的高效能捲動導向動畫，因為這類事件會以非同步方式傳送，且經常因為主執行緒上有資源浪費。

不過，由於在瀏覽器中導入 CSS 和 UI 功能，您現在可以建立宣告式捲動驅動動畫。捲動時間軸和檢視畫面時間軸是整合現有 Web Animations API (WAAPI) 和 CSS Animation API 的新概念，現在只要編寫幾行程式碼，就能在主執行緒外執行流暢的捲動導向動畫播放流暢無比。在本個案研究中，您將瞭解 Tokopedia、redBus 和 Policybazaar 如何運用這項新功能。

瀏覽器支援

  • 115
  • 115
  • x

來源

Tokopedia

Tokopedia 以捲動式動畫，取代先前的自訂 JavaScript 導入作業，藉此最佳化網頁效能，並強化電子商務轉換漏斗的整體瀏覽體驗。

與使用傳統的 JavaScript 捲動事件相比，我們成功減少多達 80% 的程式碼行，並發現捲動畫面時，平均 CPU 使用率從 50% 降至 2%： Tokopedia 資深軟體工程師 Andy Wihalim

根據使用者捲動位置，以動畫方式調整頂端固定式列的顯示設定。

程式碼

以下實作項目會使用 scroll() 函式設定匿名捲動進度時間軸，以控制 CSS 動畫的進度。頂端固定列的顯示設定會根據定義的 animationRange 中的捲動位置而改變。

const toggleBar = keyframes({
  to: { height: 48 },
});

export const cssWrapper = css({
  position: 'fixed',
  left: 0,
  width: '100vw',
  pointerEvents: 'none',
  marginTop: 120,
  height: 0,
  overflow: 'hidden',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'flex-end',
  animation: `${toggleBar} linear both`,
  animationTimeline: 'scroll()',
  animationRange: '20px 70px',
});

redBus

redBus 的「待辦事項」到達網頁上針對行動裝置和電腦分別提供不同的動畫，會向所有使用者顯示這項資訊。因此，這些捲動式動畫能夠以 CSS 取代這些自訂 JavaScript 實作方式，也能達到同樣的效果。

用途

提供圖片顯示 (適用於行動裝置) 和封面流程 (適用於電腦) 的相片庫。

捲動式動畫圖片顯示效果，適用於載入 redBus「觀光景點」相片庫的圖片。

代碼 (行動裝置)

在上述範例中，Tokopedia 使用匿名的捲動進度時間軸。在下列程式碼中，redBus 使用已命名的檢視畫面進度時間軸。動畫會變更元素的 animation-range 中 <img> 元素中的 opacity 和 clip-path 元素，在本例中為圖片庫捲動器。

const reveal = keyframes`
   from {
       opacity: 0;
       clip-path: inset(45% 20% 45% 20%);
   }
   to {
       opacity: 1;
       clip-path: inset(0% 0% 0% 0%);
   }`

const CardImage = styled.div`
   width: 100%;
   height: 100%;
   img {
       border-top-left-radius: 0.75rem;
       border-top-right-radius: 0.75rem;
       height: 100%;
       width: 100%;
       object-fit: cover;
       view-timeline-name: --revealing-image;
       view-timeline-axis: block;
  
       /* Attach animation, linked to the  View Timeline */
       animation: linear ${reveal} both;
       animation-timeline: --revealing-image;
  
       /* Tweak range when effect should run*/
       animation-range: entry 25% cover 50%;
   }
`;

我們很高興看到這項功能完美結合效能和更優質的體驗，可有效提升網頁體驗信號的搜尋引擎最佳化 (SEO)。此外，由於學習曲線十分精簡，因此每個電子商務網站都必須具備這些功能。此外，我們也得到其他團隊的正面意見回饋和支援，利用 SDA 新增更多使用者歷程。 redBus 資深工程經理 Amit Kumar。

政策博薩爾

比較保險方案是使用者為了引導決策程序而採取的重複關鍵行動。Policybazaar 使用捲動式動畫，並根據使用者捲動表格的需求，將低優先順序元素的大小排序。如此一來，即可享有流暢的捲動體驗，同時改善可讀性。

我們運用捲動式動畫，將可視區域空間最大化，方便使用者比較不同計畫，進而確保提供專注且順暢無礙的閱讀體驗 —PolicyBazaar 產品保險設計部門主管 Rishabh Mehrotra。

捲動導向動畫 animate-timeline，位於「投資」和「生命週期」(業務單位) 的比較計畫表格上。

程式碼

與前述範例類似，Policybazaar 使用 scroll() 函式來設定匿名捲動進度時間軸，以控制 CSS 動畫的進度。在此情況下，系統會縮小字型大小，並根據已定義的 animation-range 中的捲動位置來淡出標頭。

@supports (animation-timeline: scroll()) {
.plan-comparison .inner-header {
animation: move-and-fade-header linear both;
}
.plan-comparison .left-side {
animation: shrink-name linear both;
}
.plan-comparison .inner-header, .plan-comparison .left-side {
animation-timeline: scroll();
animation-range: 0 150px;
}
}

@keyframes move-and-fade-header {
  to {
    translate: 0% -5%;
    top:103px;
}
}

@keyframes shrink-name {
  to {
    font-size: 1.5rem;
  }
}

捲動式動畫做為整個使用者歷程的共同模式

所有精選電子商務公司都使用捲動式動畫，在有資訊卡的頁面上使用捲動式動畫，利用動畫資訊卡吸引使用者註意。以下範例顯示使用者體驗中不同部分的資訊卡捲動效果。方法是使用匿名檢視畫面進度時間軸來控制自訂 CSS 動畫的進度，如以下 CSS 程式碼片段所示。

@keyframes animate-in {
 0% { opacity: 0; transform: translateY(10%); }
 100% { opacity: 1; transform: translateY(0); }
}

@keyframes animate-out {
 0% { opacity: 1; transform: translateY(0); }
 100% { opacity: 0; transform: translateY(-10%); }
}

.flyin_animate {
   animation: animate-in linear forwards;
   animation-timeline: view();
   animation-range: entry;
}

redBus (首頁)

在 redBus 的「觀光景點」到達網頁上載入產品資訊卡時，捲動式動畫會飛進。

Policybazaar (產品資訊頁面)

捲動式動畫淡入，在投資和生活 LOB (業務單位) 中淡出產品資訊卡。

Tokopedia (產品詳細資料頁面)

捲動瀏覽列出的產品時，淡入/淡出動畫。

使用捲動式動畫 API 時的注意事項

非支援的瀏覽器可以呈現折線捲動驅動的動畫，例如使用捲動時間折線。這樣就需要進行額外測試，以確保它能與您的架構搭配使用，而且使用 polyfill 的瀏覽器不會發生動畫故障或卡頓體驗。

您可以在 CSS 中使用 @supports 測試動畫時間軸支援功能，再使用捲動式動畫。例如：

@supports (animation-timeline: scroll()) {

}

資源

瀏覽本系列其他文章，瞭解電子商務公司如何使用新的 CSS 和 UI 功能 (例如檢視轉換、彈出式視窗、容器查詢和 has() 選取器) 獲益。