キネティック分割
見出しの単語が1つずつ下からスライドインしながらフェードイン。ボタンで何度でも再生。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- ヒーロー見出しを単語ごとに立ち上げる
- 3〜4 語の短いスローガン
- 初回表示と再生ボタンで見せる登場演出
- 避ける場面
- 長文・段落（単語数ぶん待たせる）
- スクロールで何度も繰り返す装飾
- 構成要素
- ステージ
- 行（マスク）
- 単語
- 再生ボタン
- 持っている状態
- 通常
- ホバー
- フォーカス
- 無効
- キーボード
Tab で「再生」へ、Enter／Space で再生。再生中はボタンが無効
- 支援技術
ボタンに aria-label「アニメーションを再生」。単語は常に DOM にあり読み上げ順は不変。focus-visible で輪郭。reduced-motion では動かさず全表示
- 動き
単語ごと 100ms＋160ms×順で下 60% から 500ms、transform は (.22,1,.36,1)・opacity は ease。行のマスクから立ち上がる
デザインの要点
- 各行を overflow: hidden のマスクにして、単語を下 60% から立ち上げる。マスク無しの上昇は「浮く」、マスクありは「現れる」
- 遅延は 100ms＋160ms×順番。3 語で最後が 420ms 後に動き出し、全体 1 秒以内に収まる
- transform は (.22,1,.36,1) のオーバーシュート無し ease-out、opacity は ease と別カーブ。位置と濃さを同じカーブにすると硬い
- 再生前に class を外して次フレームで付け直す。transition: none の既定に戻してから in を付けないと逆再生が見える
コード（コピーして使えます）
<div class="ks-wrap">
<div class="ks-stage" id="ksStage">
<div class="ks-line"><span class="ks-word" data-i="0">Make</span></div>
<div class="ks-line"><span class="ks-word" data-i="1">it</span></div>
<div class="ks-line"><span class="ks-word" data-i="2">Move.</span></div>
</div>
<button class="ks-btn" id="ksBtn" aria-label="アニメーションを再生">再生</button>
</div>