瞭解如何運用捲動時間軸和查看時間軸,以宣告方式建立捲動導向的動畫。
捲動式動畫
捲動式動畫是網路上常見的使用者體驗模式。捲動式動畫已連結至捲動容器的捲動位置。這表示當您向上或向下捲動時,連結的動畫會在直接回應中向前或向後移動。像是視差背景圖片,或閱讀指標會在你捲動時移動。
捲動式動畫也是類似捲動式動畫,會與其捲動容器中元素位置相連結的動畫。舉例來說,元素在進入畫面中時可能會淡入。
如要達到這類效果,傳統的方法是在主執行緒上回應捲動事件,進而造成兩個主要問題:
- 新式瀏覽器會在獨立程序上執行捲動,因此以非同步方式傳送捲動事件。
- 主要執行緒動畫受到資源浪費。
這使得建立成效卓越的捲動式動畫,與捲動操作不同步或非常困難。
自 Chrome 115 版起,系統會提供一組新的 API 和概念,可用於啟用宣告式捲動式動畫:捲動時間軸和查看時間軸。
這些新概念整合了現有的 Web Animations API (WAAPI) 和 CSS Animation API,旨在沿用現有 API 帶來的優勢。包括讓捲動式動畫在主執行緒外執行。是的,我要正確讀起來:現在只需要新增幾行程式碼,就能建立流暢的動畫效果,像是捲動、在主執行緒中執行時等動作。不喜歡什麼地方?!
網路上的動畫、簡短回顧
使用 CSS 在網路上製作動畫
如要在 CSS 中建立動畫,請使用 at-rule 的 @keyframes
定義一組主要畫面格。使用 animation-name
屬性將其連結至元素,同時設定 animation-duration
以決定動畫所需時間。市面上還有更多 animation-*
長篇屬性,animation-easing-function
和 animation-fill-mode
等等,全都可以在 animation
的簡寫中結合使用。
舉例來說,以下動畫說明如何在 X 軸上放大元素,同時變更背景顏色:
@keyframes scale-up {
from {
background-color: red;
transform: scaleX(0);
}
to {
background-color: darkred;
transform: scaleX(1);
}
}
#progressbar {
animation: 2.5s linear forwards scale-up;
}
透過 JavaScript 在網路上播放動畫
在 JavaScript 中,Web Animation API 可達到相同的效果。您可以建立新的 Animation
和 KeyFrameEffect
例項,或者使用較短的 Element
animate()
方法。
document.querySelector('#progressbar').animate(
{
backgroundColor: ['red', 'darkred'],
transform: ['scaleX(0)', 'scaleX(1)'],
},
{
duration: 2500,
fill: 'forwards',
easing: 'linear',
}
);
這個 JavaScript 程式碼片段視覺化結果與先前的 CSS 版本相同。
動畫時間軸
根據預設,附加至元素的動畫會在文件時間軸上執行。原始時間從載入網頁時起算,從 0 開始,並在時脈時間逐漸向前快轉。這是預設的動畫時間軸,截至目前您唯一能存取的動畫時間軸。
- 捲動進度時間軸:與特定軸上捲動容器的捲動位置相連結的時間軸。
- 查看進度時間軸:連結至捲動容器中特定元素的相對位置的時間軸。
捲動進度時間軸
捲動進度時間軸是一種動畫時間軸,與捲動容器的捲動位置 (也稱為「scrollport」或「scroller」) 進度連結一個軸。可將捲動範圍中的位置轉換為進度百分比。
起始捲動位置表示進度為 0%,結束捲動位置則代表 100% 進度。在下方的示意圖中,您可以看到當捲動捲軸由上往下捲動時,進度會從 0% 上升至 100%。
✨ 快來試試這項功能
捲動進度時間軸通常縮寫為「捲動時間軸」。
查看進度時間軸
這種時間軸類型會連結到捲動容器中特定元素的相對進度。如同捲動進度時間軸,系統會追蹤捲動的捲動偏移。與捲動進度時間軸不同的是,這是捲動器中主題的相對位置,用來決定進度。
這與 IntersectionObserver
的運作方式大致類似,可追蹤元素在捲動器的顯示程度。如果元素未顯示在捲動器中,則不會相交。如果它出現在捲軸內 (即使是最小的部分),就是相交。
檢視進度時間軸會從主體開始與捲動工具互動的那一刻開始,並在主體停止與捲動畫面互動時結束。在下方示意圖中,您可以看到當主體進入捲動容器,且在主體離開捲動容器時達到 100% 時,進度會從 0% 開始計數。
✨ 快來試試這項功能
觀看進度時間軸通常縮寫為「查看時間軸」。你可以根據主題大小指定檢視畫面時間軸的特定部分,稍後會瞭解詳情。
實用捲動進度時間軸
在 CSS 中建立匿名捲動進度時間軸
如要在 CSS 中建立捲動時間軸,最簡單的方法就是使用 scroll()
函式。這項操作會建立匿名的捲動時間軸,你可以將該時間軸設為新 animation-timeline
屬性的值。
示例:
@keyframes animate-it { … }
.subject {
animation: animate-it linear;
animation-timeline: scroll(root block);
}
scroll()
函式接受 <scroller>
和 <axis>
引數。
以下是接受的 <scroller>
引數值:
nearest
:使用最近的祖系捲動容器 (預設)。root
:將文件可視區域當做捲動容器使用。self
:使用元素本身做為捲動容器。
以下是接受的 <axis>
引數值:
block
:使用捲動容器區塊軸的進度測量結果 (預設)。inline
:使用沿著捲動容器內嵌軸的進度測量結果。y
:使用沿著捲動容器 Y 軸的進度測量值。x
:使用沿著捲動容器 x 軸的進度測量結果。
舉例來說,如要將動畫繫結至區塊軸的根捲動器,要傳入 scroll()
的值為 root
和 block
。加總後,值為 scroll(root block)
。
示範:閱讀進度指標
此示範的閱讀進度指標固定在可視區域頂端。當你向下捲動頁面時,進度列會不斷延伸,直到文件結尾處佔滿整個可視區域寬度。使用匿名的捲動進度時間軸播放動畫。
✨ 快來試試這項功能
閱讀進度指標位於頁面頂端的位置固定位置。如要使用複合動畫,系統不能為 width
製作動畫效果,但使用 transform
縮減元素在 X 軸上。
<body>
<div id="progress"></div>
…
</body>
@keyframes grow-progress {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
#progress {
position: fixed;
left: 0; top: 0;
width: 100%; height: 1em;
background: red;
transform-origin: 0 50%;
animation: grow-progress auto linear;
animation-timeline: scroll();
}
#progress
元素上 grow-progress
動畫的時間軸設定為使用 scroll()
建立的匿名時間軸。未提供給 scroll()
的引數,因此會改回使用預設值。
要追蹤的預設捲軸是 nearest
號,預設軸是 block
。這會有效指定根捲動器,如同 #progress
元素的最接近捲動器,同時追蹤區塊方向。
在 CSS 中建立已命名的捲動進度時間軸
定義「捲動進度時間軸」的另一種方式是使用已命名的時間軸。這個做法有點較為詳細,但如果您未指定上層捲動器或根捲動器,或是網頁使用多個時間軸,或是自動查詢無法運作,這項做法就很實用。如此一來,您就可以依據為捲動進度的名稱找出捲動進度時間軸。
如要為元素建立已命名的捲動進度時間軸,請將捲動容器上的 scroll-timeline-name
CSS 屬性設為所需 ID。值的開頭必須是 --
。
如要調整要追蹤的軸,請宣告 scroll-timeline-axis
屬性。允許的值與 scroll()
的 <axis>
引數相同。
最後,如要將動畫連結至捲動進度時間軸,請在需要動畫元素的元素上設定 animation-timeline
屬性,使其與 scroll-timeline-name
使用的 ID 相同。
程式碼範例:
@keyframes animate-it { … }
.scroller {
scroll-timeline-name: --my-scroller;
scroll-timeline-axis: inline;
}
.scroller .subject {
animation: animate-it linear;
animation-timeline: --my-scroller;
}
如有需要,您可以在 scroll-timeline
簡寫中合併 scroll-timeline-name
和 scroll-timeline-axis
。例如:
scroll-timeline: --my-scroller inline;
示範:橫向輪轉介面步驟指標
此示範元素在每個圖片輪轉介面上方有一個步驟指標。如果輪轉介面中有三張圖片,指標列的寬度為 33%,表示您目前查看的是三張圖片中的一張圖片。當最後一張圖片在畫面中時 (由捲軸捲動至底部),指標會佔滿捲動畫面的完整寬度。使用已命名的捲動進度時間軸播放動畫。
✨ 快來試試這項功能
圖片庫的基本標記如下:
<div class="gallery" style="--num-images: 2;">
<div class="gallery__scrollcontainer">
<div class="gallery__progress"></div>
<div class="gallery__entry">…</div>
<div class="gallery__entry">…</div>
</div>
</div>
.gallery__progress
元素絕對位於 .gallery
包裝函式元素內。其初始大小由 --num-images
自訂屬性決定。
.gallery {
position: relative;
}
.gallery__progress {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1em;
transform: scaleX(calc(1 / var(--num-images)));
}
.gallery__scrollcontainer
會水平配置內含的 .gallery__entry
元素,也是捲動的元素。藉由追蹤捲動位置,.gallery__progress
動畫就會呈現動畫效果。透過參照已命名的捲動進度時間軸 --gallery__scrollcontainer
即可進行設定。
@keyframes grow-progress {
to { transform: scaleX(1); }
}
.gallery__scrollcontainer {
overflow-x: scroll;
scroll-timeline: --gallery__scrollcontainer inline;
}
.gallery__progress {
animation: auto grow-progress linear forwards;
animation-timeline: --gallery__scrollcontainer;
}
使用 JavaScript 建立捲動進度時間軸
如要在 JavaScript 中建立捲動時間軸,請建立 ScrollTimeline
類別的新例項。使用想追蹤的 source
和 axis
,傳入物業袋。
source
:要追蹤的捲動器元素的參照。使用document.documentElement
指定根捲動器。axis
:決定要追蹤的軸。與 CSS 變體類似,系統接受的值包括block
、inline
、x
和y
。
const tl = new ScrollTimeline({
source: document.documentElement,
});
如要將元素附加至網頁動畫,請將其做為 timeline
屬性傳入,並省略任何 duration
(如果有的話)。
$el.animate({
opacity: [0, 1],
}, {
timeline: tl,
});
示範:閱讀進度指標 (重新造訪)
如要透過 JavaScript 重新建立讀取進度指標,同時使用相同的標記,請使用下列 JavaScript 程式碼:
const $progressbar = document.querySelector('#progress');
$progressbar.style.transformOrigin = '0% 50%';
$progressbar.animate(
{
transform: ['scaleX(0)', 'scaleX(1)'],
},
{
fill: 'forwards',
timeline: new ScrollTimeline({
source: document.documentElement,
}),
}
);
CSS 版本中呈現的視覺效果相同:建立的 timeline
會追蹤根捲動器,並在您捲動頁面時,將 #progress
從 x 軸向上縮放為 0% 到 100%。
✨ 快來試試這項功能
運用檢視畫面進度時間軸發揮實用價值
在 CSS 中建立匿名查看進度時間軸
如要建立檢視畫面進度時間軸,請使用 view()
函式。可接受 <axis>
和 <view-timeline-inset>
的引數。
<axis>
與「捲動進度時間軸」相同,且會定義要追蹤的軸。預設值為block
。- 使用
<view-timeline-inset>
時,您可以指定偏移值 (正數或負數),以便在系統認定元素出現在畫面中時調整邊界。這個值必須是百分比或auto
,且預設值為auto
。
舉例來說,如要將動畫繫結至與區塊軸上捲動器互動的元素,請使用 view(block)
。與 scroll()
類似,請將此值設為 animation-timeline
屬性的值,而且別忘了將 animation-duration
設為 auto
。
只要使用下列程式碼,每個 img
就會在捲動時跨越可視區域淡入。
@keyframes reveal {
from { opacity: 0; }
to { opacity: 1; }
}
img {
animation: reveal linear;
animation-timeline: view();
}
Intermezzo:查看時間軸範圍
根據預設,與檢視畫面時間軸連結的動畫會附加至整個時間軸範圍。從拍攝主體進入捲動區域的那一刻開始,直到拍攝對象完全離開捲軸時結束。
您也可指定您想要附加的範圍,將其連結至檢視時間軸的特定部分。例如,只有在主題進入捲動器時才可使用此功能。在下方的示意圖中,當主體進入捲動容器,但從完全相交的當下達到 100% 時,進度會從 0% 開始計算。
您可以指定的「查看時間軸」範圍如下:
cover
:代表檢視進度時間軸的完整範圍。entry
:代表主體方塊進入檢視進度瀏覽權限範圍的範圍。exit
:代表主要方塊離開查看進度瀏覽權限範圍的範圍。entry-crossing
:代表主方塊與結束框線邊緣的範圍。exit-crossing
:代表主方塊與起始框線邊緣的範圍。contain
:代表主方塊完全包含在或全部涵蓋的範圍內,其查看進度的瀏覽權限範圍。這取決於主題是否比捲軸高度或短。
如要定義範圍,您必須設定範圍起始值和範圍結束值。每個元素都包含範圍名稱(請參閱上方清單) 和範圍偏移值,以決定該範圍名稱中的位置。範圍偏移值通常是介於 0%
到 100%
之間的百分比,但您也可以指定固定長度,例如 20em
。
舉例來說,如果您想在主體進入的那一刻開始執行動畫,請選擇 entry 0%
做為範圍開始。如要在主體輸入完畢前完成這項作業,請選擇 entry 100%
做為範圍結束的值。
在 CSS 中,您必須使用 animation-range
屬性進行設定。示例:
animation-range: entry 0% entry 100%;
在 JavaScript 中,請使用 rangeStart
和 rangeEnd
屬性。
$el.animate(
keyframes,
{
timeline: tl,
rangeStart: 'entry 0%',
rangeEnd: 'entry 100%',
}
);
請使用下方內嵌的工具,查看每個範圍名稱代表的意義,以及百分比對於起始與結束位置的影響。請嘗試將範圍起始值設為 entry 0%
,並將範圍結束設為 cover 50%
,然後拖曳捲軸來查看動畫結果。
觀看錄影
您在使用這個檢視時間軸範圍工具時,可能會發現某些範圍可以用兩種不同的範圍名稱 + 範圍偏移組合來指定。舉例來說,entry 0%
、entry-crossing 0%
和 cover 0%
都會指定相同區域。
如果範圍起始值和範圍結束會指定相同的範圍名稱,並且橫跨整個範圍 (從 0% 到 100%),您可將值縮短為範圍名稱。舉例來說,animation-range: entry 0% entry 100%;
可改寫為較短的 animation-range: entry
。
示範:圖片顯示
此示範會在使用者進入捲動區域時淡入圖片。方法是使用「匿名檢視時間軸」。系統已調整動畫範圍,讓每張圖片僅佔據捲動畫面一半時的不透明度。
✨ 快來試試這項功能
展開效果可透過使用動畫的裁剪路徑達成。這個效果使用的 CSS 如下:
@keyframes reveal {
from { opacity: 0; clip-path: inset(0% 60% 0% 50%); }
to { opacity: 1; clip-path: inset(0% 0% 0% 0%); }
}
.revealing-image {
animation: auto linear reveal both;
animation-timeline: view();
animation-range: entry 25% cover 50%;
}
在 CSS 中建立已命名的查看進度時間軸
捲動時間軸的已命名版本類似,您也可以建立名為「查看時間軸」的版本。您使用的變數中包含 view-timeline-
前置字串 (亦即 view-timeline-name
和 view-timeline-axis
),而不是 scroll-timeline-*
屬性。
適用相同類型的值,同樣適用相同的查詢已命名時間軸規則。
示範:顯示及再次瀏覽圖片
重新處理圖片中的示範,修改後的程式碼如下所示:
.revealing-image {
view-timeline-name: --revealing-image;
view-timeline-axis: block;
animation: auto linear reveal both;
animation-timeline: --revealing-image;
animation-range: entry 25% cover 50%;
}
使用 view-timeline-name: revealing-image
時,系統會在最接近的捲動器內追蹤元素。然後會使用相同的值做為 animation-timeline
屬性的值。圖像輸出內容與先前完全相同。
✨ 快來試試這項功能
在 JavaScript 中建立檢視進度時間軸
如要在 JavaScript 中建立「查看時間軸」,請建立 ViewTimeline
類別的新例項。使用要追蹤的 subject
、axis
和 inset
傳入資產包。
subject
:想在其捲動器中追蹤的元素參照。axis
:要追蹤的軸。與 CSS 變體類似,系統接受的值包括block
、inline
、x
和y
。inset
:判斷方塊是否處於可見狀態時,捲軸的插邊 (正數) 或輸出 (負) 調整項。
const tl = new ViewTimeline({
subject: document.getElementById('subject'),
});
如要將元素附加至網頁動畫,請將其做為 timeline
屬性傳入,並省略任何 duration
(如果有的話)。您也可以選擇使用 rangeStart
和 rangeEnd
屬性傳入範圍資訊。
$el.animate({
opacity: [0, 1],
}, {
timeline: tl,
rangeStart: 'entry 25%',
rangeEnd: 'cover 50%',
});
✨ 快來試試這項功能
更多值得一試的功能
與一組主要畫面格附加多個檢視畫面時間軸範圍
一起來看看這份聯絡人清單示範,其中項目清單項目以動畫呈現。當清單項目從底部進入捲軸時,它會滑入並淡入,當它離開頂端的捲軸時滑出 + 淡出。
✨ 快來試試這項功能
在本示範中,每個元素都會以一個檢視畫面時間軸裝飾,並在跨越捲動區域時追蹤元素,但連接了兩個捲動式動畫。animate-in
動畫附加至時間軸的 entry
範圍,animate-out
動畫則附加到時間軸的 exit
範圍。
@keyframes animate-in {
0% { opacity: 0; transform: translateY(100%); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes animate-out {
0% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-100%); }
}
#list-view li {
animation: animate-in linear forwards,
animate-out linear forwards;
animation-timeline: view();
animation-range: entry, exit;
}
此外,您可以選擇建立一組含有範圍資訊的主要畫面格,不必分別將兩個不同的動畫附加至不同的範圍。
@keyframes animate-in-and-out {
entry 0% {
opacity: 0; transform: translateY(100%);
}
entry 100% {
opacity: 1; transform: translateY(0);
}
exit 0% {
opacity: 1; transform: translateY(0);
}
exit 100% {
opacity: 0; transform: translateY(-100%);
}
}
#list-view li {
animation: linear animate-in-and-out;
animation-timeline: view();
}
由於主要畫面格包含範圍資訊,因此您不必指定 animation-range
。結果與先前完全相同。
✨ 快來試試這項功能
附加至非祖系捲動時間軸
具名「捲動時間軸」和名為「查看時間軸」的查詢機制僅限於捲動祖系。但通常需要追蹤的元素,通常是需要追蹤的捲動工具子項。
為此,timeline-scope
屬性登場。您不需要實際建立,就能使用這個屬性宣告使用該名稱的時間軸。這樣時間軸就能擴大範圍。實際操作時,您可以在共用的父項元素上使用 timeline-scope
屬性,以便將子項捲動器的時間軸附加至元素。
例如:
.parent {
timeline-scope: --tl;
}
.parent .scroller {
scroll-timeline: --tl;
}
.parent .scroller ~ .subject {
animation: animate linear;
animation-timeline: --tl;
}
在這段程式碼中:
.parent
元素會宣告名稱為--tl
的時間軸。其任何子項都可以找到並做為animation-timeline
屬性的值。.scroller
元素實際上會定義名為--tl
的捲動時間軸。根據預設,只有子項看得到該物件,但因為.parent
已設為scroll-timeline-root
,因此會附加至它。.subject
元素使用--tl
時間軸。它會沿著其祖系樹狀結構行走,並在.parent
上找到--tl
。當.parent
上的--tl
指向.scroller
的--tl
時,.subject
基本上會追蹤.scroller
的捲動進度時間軸。
換句話說,您可以使用 timeline-root
將時間軸向上移至祖系 (又稱「提升」),讓祖系的所有子項都能存取。
timeline-scope
屬性可同時與捲動時間軸和查看時間軸搭配使用。
更多示範與資源
本文介紹的所有示範內容皆包含捲動式動畫.style 迷你網站上的資訊。這個網站提供更多示範,可強調捲動式動畫的功能。
這份專輯封面清單就是另一個示範模式,每個封面都會以 3D 方式旋轉,成為中心焦點。
✨ 快來試試這項功能
或是此堆疊資訊卡示範使用 position: sticky
。隨著資訊卡堆疊,卡住的資訊卡會縮小,產生良好的深度效果。最後,整個堆疊滑出畫面,
✨ 快來試試這項功能
此外, 捲動式動畫.style 也呈現了一系列工具,例如這篇文章先前提供的「查看時間軸範圍進度」視覺化內容。
在 2023 年 Google I/O 大會上,網頁動畫的新功能也會介紹捲動式動畫。