你剛才看到的是標題變形：卡片上的標題移動，變成這一頁的主標題。若沒有看到動畫，可能是瀏覽器不支援，或系統開了減少動態效果。
V236 / CINEMATIC LAB
電影感互動實驗室
往下捲，卷宗會一層層被揭開。這裡有八種跟著捲動走的效果，加上工具中心到工具頁的標題變形。全部是漸進增強：瀏覽器不支援、系統開了減少動態效果，或在輕量模式時，內容會直接以最終樣貌顯示。
第二層效果已啟用。往下捲動，每個區塊會在進入視窗時播放。
你的瀏覽器能做到什麼
以下由這個瀏覽器即時判斷。標示「停用」的項目會讓第二層直接顯示最終內容。
- 捲動時間軸（animation-timeline）
- 檢查中
- 整數自訂屬性（@property）
- 檢查中
- 頁面間轉場（View Transitions）
- 檢查中
- 換頁事件（pageswap、pagereveal）
- 檢查中
- 系統的「減少動態效果」
- 檢查中
- 省流量或 2G 網路
- 檢查中
- 輕量視覺模式（v215-lite）
- 檢查中
- 第二層開關（data-fx2-off）
- 檢查中
- 標題變形
- 檢查中
進場上升data-fx2="rise"
描述需求
先用自己的話寫下發生了什麼，不必整理得很漂亮。
保留原件
原始檔案先放著不動，修整與比對都另存副本。
核對下一步
能回到來源的才列入，其餘標成待核對。
- 效果
- 進入視窗時，從下方 20 px 淡入並上升到定位。
- 用法
<div data-fx2="rise">- 停用時
- 元素一直是最終樣貌。
- 限制
- 放在首屏以下的區塊。一個元素只用一個會改動自身
animation的效果（rise、wipe、count 三選一）。
由左至右揭露data-fx2="wipe"
- 效果
- 進入視窗時，以
clip-path: inset()由左至右揭露；適合卡片與圖片。 - 用法
<figure data-fx2="wipe">- 停用時
- 不裁切，原樣顯示。
- 限制
- 裁切只在揭露之前與期間存在，之後移除，所以卡片的陰影與焦點外框不會被切掉。
遮蔽條揭露data-fx2="redact"
案卷節錄（示意）
這段文字一直都在頁面裡：可以搜尋、可以選取複製，螢幕閱讀器也照常朗讀。遮蔽條只是蓋在上面的裝飾，進入視窗時向右收縮，露出底下的字。
每一行的遮蔽條長度略有不同，像是逐行塗黑；最前面的金線是目前掃描到的位置。往回捲動時，遮蔽條會再蓋回去。
- 效果
- 文字區塊上有一組逐行遮蔽條，進入視窗時向右收縮消失，前緣帶一條金線。遮蔽條是
::before裝飾，文字沒有被改動。 - 用法
<p data-fx2="redact">。多行文字不用拆行，也不用 JavaScript。- 停用時
- 沒有遮蔽條，文字原樣顯示。
- 限制
- 文字區塊本身不要有上下內距，遮蔽條才會對齊行高。同一個元素不要再加 stamp 或 scan。
案卷印章data-fx2="stamp"
示範卡片 A
印章文字取自 data-stamp，進入視窗時從放大、微旋轉的狀態壓下定位。
示範卡片 B
印章壓在卡片右上角，一半在框外，不會蓋住內文。
示範卡片 C
印章只是版面裝飾，不代表認證、核准或背書。
- 效果
- 卡片角落的印章，進入視窗時從放大、微旋轉、透明過渡到定位，並帶一點回彈。
- 用法
<div data-fx2="stamp" data-stamp="本機運算">- 停用時
- 印章以定位後的樣子直接顯示：它的外觀是一般樣式，動畫只負責進場。
- 限制
- 印章文字用短詞，說明實際做法，例如「本機運算」「未上傳」「副本」。不要寫成認證、核准或背書。卡片上方要有約 18px 的內距，印章的下半部才不會壓到內文；也可以用
--fx2-stamp-top調整位置。
掃描光帶data-fx2="scan"
卷宗索引（示意）
- 原件保留
- 來源待核對
- 時間軸整理中
- 交接尚未開始
- 效果
- 卡片進入視窗時，一道細窄的光帶由左掠過。光帶是
::before，完全在卡片範圍內。 - 用法
<div data-fx2="scan">- 停用時
- 沒有光帶。
- 限制
- 不要和 redact 放在同一個元素上；可以和 stamp 同時使用，因為兩者各用一個偽元素。
景深data-fx2="depth"
景深就是本頁最上方的區塊：資料夾、編號標籤與格線分三層，隨捲動以不同速度位移。
回到最上方，再往下捲一次- 效果
- 英雄區的圖層用
scroll(root)時間軸，在捲動的前 70% 螢幕高度內，以不同速度位移。 - 用法
- 容器
data-fx2="depth"，圖層data-fx2-depth="1|2|3"（1 遠、3 近）。 - 停用時
- 圖層留在原位。
- 限制
- 圖層要比容器大一些，位移時才不會露出邊緣。will-change 只加在這幾個圖層上。
數字滾動data-fx2="count"
8種捲動效果
2個要引入的檔案
12個可依序進場的子元素
3層景深圖層
- 效果
- 數字從 0 數到目標值。真實數字寫在文字裡，數字滾動只是疊在上面的裝飾，結束時淡出。
- 用法
<b data-fx2="count" style="--fx2-to:83">83</b>。--fx2-to要和文字相同；萬一不同，最後顯示的仍是文字裡的數字。- 停用時
- 直接顯示文字裡的數字。
- 限制
- 適用 1 到 4 位整數，沒有千分位。裝飾用的數字以空白替代文字標示，螢幕閱讀器只會讀到文字裡的那一次。這是少數需要逐格更新數字的效果，請只用在少數數字上。
依序進場data-fx2="stagger"
- 1保留原件
- 2核對來源
- 3整理時間
- 4標出差異
- 5另存副本
- 6交給真人
- 效果
- 容器內的子元素依序進場，每個之間有一小段錯位。
- 用法
<ol data-fx2="stagger">。前 12 個子元素各有預先寫好的錯位，不用 JavaScript。- 停用時
- 全部直接顯示。
- 限制
- 適合並排的卡片或格狀區域。單欄長清單請改在各項目上用 rise。只有前 12 個子元素有動畫，第 13 個以後的子元素不套用，直接顯示。
標題變形data-fx2-morph
- 效果
- 點擊來源頁的卡片，卡片上的標題移動並變形成目的頁的主標題
h1。 - 用法
- 兩頁都載入
v236-fx2.js，並都有@view-transition{navigation:auto}。來源卡片加data-fx2-morph；工具中心的.v229-toolcard已內建。 - 停用時
- 回到原本的淡入淡出換頁。
- 限制
- 只限同網站、同一分頁的一般連結。返回上一頁不變形。目的頁的主標題要在首屏內，否則不變形。同一時間只有一個元素帶轉場名稱，用完即清除。
它如何不拖慢頁面
- 只動不必重新排版的東西。位置微移、透明度、縮放與裁切，版面不會跳動，周圍的文字不會被推開。
- 進度交給瀏覽器的捲動時間軸。本層沒有 scroll 事件監聽、沒有 IntersectionObserver、沒有計時器。位移與透明度通常可交給合成器處理；裁切（wipe）與數字更新（count）仍會用到主執行緒，所以範圍很短，也建議只用在少數元素。
- 只有標題變形用到腳本。不到 3 KB，只在點擊與換頁的那一刻執行，不連網，也不讀寫瀏覽器儲存空間。
- 不支援就不演。瀏覽器不支援捲動時間軸、系統開了減少動態效果、輕量視覺模式、省流量或 2G 時（省流量與 2G 由
v236-fx2.js偵測），整層停用，內容一律是最終樣貌。 - 可以整個關掉。在
<html>加上data-fx2-off，或呼叫GIB236FX2.disable()。
實測（本機沙箱小樣本）
| 指標（中位數，原頁 → 加上第二層） | 工具中心 | 精密修復工坊 | 首頁 |
|---|---|---|---|
| 首次繪製（FCP） | 168 → 200 ms | 128 → 156 ms | 944 → 988 ms |
| 捲動影格時間，平均／P95（CPU 降速 4 倍） | 16.7／16.7 → 16.7／16.7 ms | 16.7／16.7 → 16.7／16.8 ms | 283／496 → 243／449 ms |
| 捲動時超過 50 ms 的影格數 | 0 → 0 | 0 → 0 | 92 → 91 |
| 版面位移 CLS（載入加捲動） | 0.000 → 0.000 | 0.000 → 0.000 | 0.000 → 0.000 |
| 載入時的長任務數／阻擋時間 TBT（未節流） | 1／32 → 1／48 ms | 0／0 → 1／14 ms | 3／703 → 3／828 ms |
| 捲動時的長任務數／TBT（CPU 降速 4 倍） | 0／0 → 0／0 ms | 0／0 → 0／0 ms | 14／1222 → 3.5／348 ms |
| 多下載的資料（壓縮後） | +4.3 KB | +4.3 KB | +3.0 KB |
怎麼看這張表
- 首次繪製多約 32～36 ms。工具中心多約 32 ms、精密修復工坊多約 36 ms（逐次相減取中位數，所以和表內兩個中位數相減不完全相同）。拆解後，這個差距主要來自多一個腳本請求，不是效果本身：只加樣式表，首次繪製多約 0 ms；加上腳本多約 20 ms；把腳本換成大小相同、內容為空的檔案也多約 18 ms（工具中心，16 輪隨機順序）。
- 捲動沒有變差。影格時間中位數、版面位移與長任務數都沒有變差。實驗室頁本身有 17 個效果節點，用同一份檔案把效果關掉再打開，各 7 次（CPU 降速 4 倍，捲過 8,256 px）。數字依序是效果關閉／開啟：影格平均 16.7／16.7 ms，P95 16.7／16.8 ms，超過 50 ms 的影格 0／0 個，CLS 都是 0。
要老實說的地方
- 精密修復工坊的捲動。7 次裡有 2 次加上第二層後影格 P95 偏高（最高 26.7 ms；原頁有 0 次），沒有任何影格超過 50 ms，樣本太小，分不出是第二層還是機器雜訊。
- 載入阻擋時間 TBT。兩個工具頁在交錯對照中，加上第二層後較高的次數是 5／7 與 5／7。工具中心另做 16 輪隨機順序，中位數原頁 60 ms、加上第二層 71 ms，單次散布很大（原頁 16～119、加上第二層 20～345 ms）。差距在雜訊範圍內，但不能說完全沒有。
- 首頁。只有 4 組交錯對照，雜訊大：首次繪製多約 38 ms、載入 TBT 多約 121 ms。另做 8 輪隨機順序的載入對照，首次繪製原頁 938 ms、加上第二層 892 ms，TBT 中位數原頁 753 ms、加上第二層 667 ms，方向和交錯對照相反，只能當作雜訊。
量測環境：Chromium 141 無頭模式、2 核心，量測時機器上還有其他程序在跑。每頁用原頁與加上第二層的版本交錯各跑 7 次（首頁 4 次，只捲前 6,016 px）取中位數；捲動用腳本每個影格捲 64 px。這是本機沙箱小樣本，沒有量過真實網路與真實手機，只能看趨勢，不能當作任何速度承諾。
使用指南
先說清楚：這不是什麼
- 不是動畫框架，也不承諾任何速度提升；它只讓頁面進場時多一點電影感。
- 不是資料處理：不讀取、不傳送、不儲存任何內容。
- 印章與遮蔽條只是版面裝飾，不代表認證、核准、背書，也不代表資料真的被遮蔽。
- 不是每種瀏覽器都看得到效果：只在 Chromium 測過，Safari 與 Firefox 沒有測；看不到時會直接顯示最終內容。
它做什麼、不做什麼
- 做：八種捲動驅動效果，加上一個換頁時的標題變形；全部漸進增強。
- 做：和 v234 既有的
data-fx層並存，兩者各用各的屬性。 - 不做：不寫入瀏覽器的任何儲存空間（含 cookie 與各種本機儲存）；不連網；不載入第三方檔案。
- 不做：不隱藏內容，不改變版面位置，不在不支援的瀏覽器上補做動畫。
加到自己的頁面（一次一步）
- 在
<head>加入<link rel="stylesheet" href="v236-fx2.css?v=v236">。 - 再加入
<script src="v236-fx2.js?v=v236" async blocking="render"></script>。標題變形需要它，它也負責在省流量或 2G 時停用整層效果；只想先試 CSS 效果時，可以暫時不加。 - 在要動的元素上加
data-fx2="…"，一次只加一個，看過再加下一個。 - 按本頁最上方的「模擬減少動態效果」，確認內容直接顯示、沒有東西消失。
屬性對照
| 屬性 | 放在哪裡 | 用到的屬性 | 注意 |
|---|---|---|---|
rise | 卡片、段落 | opacity、translate | 首屏以下才用 |
wipe | 圖片、卡片 | clip-path | 只在揭露前與期間裁切 |
redact | 文字區塊 | scale、translate、opacity | 不要有上下內距；佔用 ::before 與 ::after |
stamp | 卡片 | scale、rotate、opacity | 文字來自 data-stamp；佔用 ::after |
scan | 卡片 | translate、opacity | 佔用 ::before |
count | 整數文字 | 一個整數自訂屬性 | --fx2-to 要與文字相同 |
stagger | 子元素並排的容器 | opacity、translate | 前 12 個子元素有錯位 |
depth | 英雄區與其圖層 | translate | 圖層要比容器大一些 |
data-fx2-off | html、區塊或單一元素 | 無 | 停用其下全部效果 |
如何自行驗證
- 開啟作業系統的「減少動態效果」，或按本頁的模擬按鈕：每個區塊都應直接顯示。
- 在開發者工具主控台輸入
document.getAnimations().length，看目前有幾個動畫在跑。 - 在
<html>加上data-fx2-off，應回到一般頁面。 - 停用 JavaScript 後重新整理：整頁仍可閱讀。
- 在遮蔽條還沒收起時按 Ctrl＋F 搜尋條下的文字：找得到，表示文字一直都在。
常見誤解
- 「看不到動畫就是壞了」：不一定。系統可能開了減少動態效果，瀏覽器也可能尚未支援捲動時間軸；這時內容會直接顯示。
- 「遮蔽條代表資料被遮蔽」：不是。文字一直在頁面裡，遮蔽條只是進場裝飾。
- 「印章代表通過檢查」：不是。印章只是版面裝飾，不代表認證或核准。
- 「數字滾動是即時統計」：不是。數字寫在文字裡，動畫只是從 0 數到它。
- 「往回捲動時動畫應該不再出現」：捲動驅動的效果會跟著捲動方向倒著播放，這是正常的。
建議流程
- 先在兩三個區塊加
rise，確認引入方式正確。 - 再選一段要強調的文字加
redact，一頁至多幾處。 - 最後才加
stamp、scan、count與標題變形，每加一種就用模擬按鈕檢查一次。