transition
Torn paper reveal / Paper tear transition / Ripped paper effect
01Demo触って、数値を決める
1.0〜1.4sが目安。出典は1.25s。cubic-bezier(0.7,0,0.3,1)は出だしが溜まるので、0.8sを切ると「破れた」より「消えた」に見える。
破れ目の上下の振れ幅。8〜14pxで手で裂いた紙に見える。0だと直線＝ただのスプリット遷移になり、20pxを超えると歯車のような作り物に寄る。
破れ目に沿って残す淡い帯の幅。6〜10pxが自然。この帯が無いと切り紙のように見え、紙の厚みが消える。
上の紙片は −tilt、下は +tilt×0.8 回す。0.5〜1.5degで「手で引き剥がした」揺らぎが出る。左右非対称にするのがコツ。
02Prompt数値はスライダーと連動
03 Vocab この動きを構成する語彙
clip-path: polygon — 要素を多角形で切り抜くCSS。破れ目は数十点の折れ線をそのまま並べて作る。点の間隔を不揃いにすると規則的な歯並びに見えない。
共有する破れ目 — 上下の紙片を同じ折れ線で切ること。閉じているときに凹凸がぴったり噛み合い、1枚の紙だったことが伝わる。別々に乱数を振ると噛み合わず、2枚の紙が重なっているだけに見える。
繊維の縁(exposed fiber) — 紙を裂くと表面の層だけが先に切れ、破れ目に沿って白っぽい繊維が帯状に残る。外側を淡い色で、内側を地の色で少し内側に切る2層構造で再現する。
非対称な傾き — 上を−1deg、下を+0.8degのように左右で量を変えて回す。同じ角度で対称に回すと機械で開いたように見え、手で裂いた揺らぎが消える。
cubic-bezier(0.7, 0, 0.3, 1) — 出だしと着地がゆっくりで中盤が速いイーズインアウト。破れ始めの「溜め」と、紙が画面外へ抜けていく勢いを1本で作れる。
04 NG → OK 伝え方の差分
NG
言い方: 「紙がビリッと破れて中身が出てくる感じにして」
なぜNG: 破れ目の形も、2枚がどちらへ退くかも未定義。破れた紙の画像(PNG)を1枚フェードさせるだけの実装や、直線で上下に割れるだけのスプリット遷移が返ってきがち。縁の繊維の帯が無いので、切り紙のような薄っぺらさになる。
OK
言い方: 「torn paper revealを実装。幅104%・高さ58%の紙片を上下に重ね、共有する折れ線(約75点・振れ幅10px)でclip-pathを切る。内側の層を8px内側で切って縁に#FBF7EAの繊維を残す。上はtranslateY(−118%) rotate(−1deg)、下は118%・0.8deg、1.25s cubic-bezier(0.7,0,0.3,1)。影は外枠に。reduced-motionは即非表示」
なぜOK: 破れ目の作り方(共有する折れ線＋点数＋振れ幅)・繊維の帯の幅・退く量と非対称な傾き・イージングまで固定。「影は外枠に」の一言で、clip-pathに影が切られて紙が浮かない事故を防げる。