本頁面由 Cloud Translation API 翻譯而成。

捲動式動畫個案研究

Swetha Gopalakrishnan

Saurabh Rajpal

捲動導向動畫是網路上常見的使用者體驗模式捲動導向動畫會連結至捲動容器的捲動位置。也就是說上下捲動時，連結動畫會向前或向後向前快轉。比如視差背景圖片或讀數會隨著您捲動畫面而移動

開發人員通常使用 JavaScript 建立捲動式動畫回應主執行緒的捲動事件。因此很難製作能與捲動同步的高效能捲動導向動畫捲動事件以非同步方式傳送，且經常因為相關事件

不過，新的瀏覽器已導向的 CSS 和 UI 功能，你現在可以建立宣告式捲動導向動畫具捲動時間軸和檢視畫面時間軸，新概念與現有模型 Web Animations API (WAAPI) 和 CSS Animations API，就能享受輕柔的捲動導向動畫，在主執行緒外執行，只有幾行程式碼再也不是件繁重乏味的工作本個案研究將探討 Tokopedia、redBus 和 Policybazaar 的原本就很有效益

瀏覽器支援

資料來源

Tokopedia

Tokopedia 以使用捲動式動畫提升網頁效能並強化電子商務轉換漏斗的整體瀏覽體驗。

相較於使用 Google Cloud 產品傳統的 JavaScript 捲動事件，並觀察到平均 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 在行動版和電腦版網頁上，都有不同的動畫觀光景點到達網頁吸引所有使用者，在轉換漏斗初期就對這群人採取行動透過捲動式動畫原本自訂的 JavaScript 導入項目，現在能用 CSS 取代，相同的效果

用途

包含圖像揭露的相片庫 (適用於行動) 和 Cover Flow (適用於電腦)。

載入 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) 成效位於以下地點的上方：憑藉最少的學習曲線，所有電子商務都不可或缺。網站。我們也獲得其他團隊的正面回饋和支援透過智慧多媒體廣告活動發掘更多使用者歷程。— Amit Kumar，資深工程部門 RedBus 經理，

政策台

比較保險方案是使用者重複採取的重要行動，藉此引導他們做出決策Policybazaar 運用捲動式動畫縮小低優先順序元素的尺寸，以回應使用者捲動表格。這個不僅提供流暢的捲動體驗，也提升了可讀性。

透過捲動式動畫，我們得以將可視區域的可視區域空間放到最大使用者比較方案，確保重點明確且簡潔有序 —Rishabh Mehrotra， Design for Life Insurance BU 的 PolicyBazaar 敬上

，瞭解如何調查及移除這項存取權。

在投資與生活中，比較企劃書表格的捲動式動畫animate-timeline LOB (業務線)。

程式碼

與前述的 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 (產品資訊頁面)

在投資和 Life LOB 中，捲動式動畫淡入、淡出、淡出產品資訊卡 (業務範圍)。

Tokopedia (產品詳細資料頁面)

捲動瀏覽產品時，淡入/淡出動畫效果。

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

即使瀏覽器不支援例如捲動時間軸 Polyfill。但如果您的需要額外測試來確保它能與您的，而且使用 polyfill 的瀏覽器不會顯示動畫錯誤或卡頓情形

在 CSS 中，您可以使用 @supports 測試是否支援動畫時間軸然後才使用捲動式動畫例如：

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

}

資源

探索本系列的其他文章，瞭解電子商務公司使用新的 CSS 和 UI 功能 (例如資料檢視轉換、彈出式視窗、容器查詢和 has() 選取器) 可帶來哪些好處。