捲動導向動畫 是網路上常見的使用者體驗模式捲動導向 動畫會連結至捲動容器的捲動位置。也就是說 上下捲動時,連結動畫會向前或向後向前快轉 。比如視差背景 圖片或讀數會隨著您捲動畫面而移動
開發人員通常使用 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 (適用於 電腦)。
代碼 (行動裝置)
在上一個範例中,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 (首頁)
Policybazaar (產品資訊頁面)
Tokopedia (產品詳細資料頁面)
使用捲動導向動畫 API 時的注意事項
即使瀏覽器不支援 例如 捲動時間軸 Polyfill。 但如果您的 需要額外測試來確保它能與您的 ,而且使用 polyfill 的瀏覽器不會顯示動畫 錯誤或卡頓情形
在 CSS 中,您可以使用 @supports
測試是否支援動畫時間軸
然後才使用捲動式動畫例如:
@supports (animation-timeline: scroll()) {
}
資源
- 捲動導向動畫示範
- 使用捲動導向的動畫,為捲動的元素加上動畫效果
- 程式碼研究室:開始使用 CSS 中的捲動式動畫
- Chrome 擴充功能:捲動導向動畫偵錯工具
- 捲動時間軸 Polyfill
- 要回報錯誤或推出新功能嗎?我們想聽聽您的想法!
探索本系列的其他文章,瞭解電子商務公司使用新的 CSS 和 UI 功能 (例如資料檢視轉換、彈出式視窗、容器查詢和 has()
選取器) 可帶來哪些好處。