media
Scroll unroll / Unfurl animation / Parchment unroll
01Demo触って、数値を決める
0.9〜1.4sが目安。出典は1.1s。0.7sを切ると芯が「転がる」より「落ちる」に見え、2sを超えると証書の授与のような儀式感が強くなる。
押してから紙が動き出すまで。この間にキャップが lead×0.4s 遅れて0.5sで外れる。0.4〜0.8sで「筒を開けてから引き出す」順序が伝わる。0だとキャップと紙が同時に動いて前振りが消える。
開く縁に乗る巻いた紙の太さ。紙の幅の3%前後(幅500pxなら14〜18px)が自然。細すぎると縁に引いた線にしか見えず、clip-pathのリビールと区別がつかない。
02Prompt数値はスライダーと連動
03 Vocab この動きを構成する語彙
unroll / unfurl — 巻いたものを広げること。unfurlは旗や帆が風で広がるニュアンスも含む。UIでは証書・地図・巻物を開く演出の呼び名として通じる。
芯(roller / rod) — 開く縁に乗っている、巻いた紙の太さぶんの棒。これがあるだけで、ただのマスクの切り開きが「紙が転がってほどける」動きに読み替わる。
同期(lockstep) — 複数の要素を同じ時間・同じイージング・同じ遅延で動かし、互いの位置関係を保つこと。値が同じでも、片方が clip-path(メインスレッド)・片方が transform(コンポジタ)だと描かれるタイミングがずれるので、同じ種類のプロパティで揃える。
逆向きの入れ子(counter-translate) — overflow: hidden の窓を動かし、中身を同じ量だけ逆へ動かす手法。中身は画面上で止まったまま、見える範囲だけが広がる。clip-path を使わずに transform だけで切り開ける。
前振り(anticipation) — 本番の動きの直前に置く小さな予告の動き。ここではキャップが先に外れて飛ぶことで、「これから中身が出てくる」と目を準備させる。
cubic-bezier(0.3, 0.6, 0.3, 1) — 出だしがやや速く、終端でゆっくり止まるイーズアウト寄りの曲線。重みのある紙が自重で転がり、最後にふわりと止まる印象になる。
04 NG → OK 伝え方の差分
NG
言い方: 「卒業証書がくるくるっと開く感じで出して」
なぜNG: 何が転がるのかが決まらない。紙をscaleYで縦に伸ばして文字ごと潰れる実装や、ただ上から下へ clip-path で切り開くだけ(芯が無い)のリビールが返ってきがち。芯を付けても、切り開きを clip-path・芯を transform で動かすと描かれるスレッドが違い、芯が縁より先に下りて離れる。
OK
言い方: 「scroll unrollを実装。overflow:hiddenの窓をtranslateY(-100%→0)、中の紙を(100%→0)と逆に動かして切り開き、芯(16px・上下グラデ)は紙と同寸の外枠でtranslateY(0→100%)。3つとも1.1s cubic-bezier(0.3,0.6,0.3,1)・遅延0.6s。clip-pathは使わない。キャップは0.24sから0.5sで右下へ飛ばす。reduced-motionは即切替」
なぜOK: 切り開きと芯を同じ時間・同じイージング・同じ遅延で、しかも全部 transform で走らせる、という一番ずれやすい点を固定している。芯を「紙と同寸の外枠の translateY(100%)」で動かすので、紙の高さが変わっても縁から外れない。