捲動式動畫個案研究

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

捲動驅動動畫是網路上常見的使用者體驗模式。捲動驅動動畫會連結至捲動容器的捲動位置。也就是說，當您向上或向下捲動時，連結的動畫會直接回應前進或後退。例如視差背景圖片或閱讀指標，這些效果會隨著捲動畫面而移動。

開發人員通常會使用 JavaScript 回應主執行緒上的捲動事件，藉此建立捲動驅動動畫。因此，由於捲動事件是異步傳送，因此很難建立與捲動同步的效能良好的捲動驅動動畫，而且通常會因位於主執行緒而導致卡頓。

不過，您現在可以透過新的CSS 和 UI 功能，建立宣告式捲動驅動動畫。透過捲動時間軸和檢視畫面時間軸，您可以使用新概念，整合現有的 Web Animations API (WAAPI) 和 CSS Animations API，現在只要幾行程式碼，就能讓捲動驅動的動畫在主執行緒中流暢運作。本案例研究將說明 Tokopedia、redBus 和 Policybazaar 如何運用這項新功能。

瀏覽器支援

  • Chrome：115。
  • Edge：115。
  • Firefox：透過標記。
  • Safari：不支援。

資料來源

Tokopedia

Tokopedia 將先前的自訂 JavaScript 導入作業改為捲動驅動動畫，以便改善網頁效能，並提升電子商務轉換漏斗的整體瀏覽體驗。

相較於使用傳統 JavaScript 捲動事件，我們成功將程式碼行數減少了 80%，並發現捲動時的平均 CPU 使用率從 50% 降至 2%。 Andy Wihalim，Tokopedia 資深軟體工程師

根據使用者的捲動位置，以動畫效果變更頂端固定列的顯示狀態。

程式碼

以下實作項目使用 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「Things To Do」相片庫載入圖片。

程式碼 (行動裝置)

在前述範例中，Tokopedia 使用了匿名捲動進度時間軸。在以下程式碼中，redBus 使用命名的檢視進度時間軸。動畫會在元素最近的祖系捲軸 (在本例中為相片庫捲軸) 中，變更元素 <img> 的 opacity 和 clip-path，也就是定義的 animation-range。

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 擴大更多使用者歷程。— Amit Kumar，redBus 資深工程管理員。

Policybazaar

比較保險方案是使用者在決策過程中反覆執行的重要動作。使用捲動驅動動畫後，Policybazaar 會根據使用者捲動資料表的情況，縮小低優先順序元素的大小。這可提供流暢的捲動體驗，同時改善可讀性。

透過捲動驅動動畫，我們得以盡可能擴大可視區域空間，讓使用者比較保險方案，確保提供專注且無雜亂的閱讀體驗。—Rishabh Mehrotra，PolicyBazaar 人壽保險事業群設計主管。

在「投資」和「壽險」業務單位 (LOB) 的比較方案表格上，顯示捲動驅動動畫 animate-timeline。

程式碼

與先前的 Tokopedia 範例相似，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「Things To Do」到達網頁上載入產品資訊卡時，使用捲動驅動動畫飛入效果。

Policybazaar (產品資訊頁面)

在投資和生活特定業務範圍 (LOB) 中，透過捲動操作產生的動畫淡入、淡出產品資訊卡。

Tokopedia (產品詳細資料頁面)

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

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

您可以為不支援的瀏覽器為捲動驅動動畫進行 polyfill，例如使用捲動時間表 polyfill。如果您這麼做，就需要進行額外測試，確保該功能與架構搭配運作良好，且使用 polyfill 的瀏覽器不會發生動畫失敗或卡頓的情形。

您可以使用 CSS 中的 @supports，在使用捲動驅動動畫前測試是否支援動畫時間軸。例如：

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

}

資源

請參閱本系列的其他文章，瞭解電子商務公司如何透過使用新的 CSS 和 UI 功能 (例如 View Transitions、Popover、Container Queries 和 has() 選取器) 獲益。