こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
今回は、視覚的なインパクトを与える「ガラスがパリーンと割れるように見出しが出現するアニメーション」をご紹介します。
ガラスの破片が散らばるような演出は、ホラー系やクールなデザイン、イベント用サイトなどで効果的に使える装飾です。
CSSとJavaScriptを組み合わせることで、比較的シンプルなコードで再現可能です。
ガラス破片風アニメーションのデモコード
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
まずは見出し要素を複数のスパン（破片）に分割し、それぞれに異なる動きを与えることで「砕けて飛び散る」ような効果を演出します。
ここで、1文字ごとに span を分けることがポイントです。
CSSで破片の飛び散りを表現
それぞれの文字（破片）に対してランダムな位置や回転を付与し、ガラスが飛び散るようなアニメーションを加えます。
このCSSでは破片が一度浮き上がってから戻るイメージを作っています。
JavaScriptでランダム性を追加
リアルな「破片感」を出すためには、各文字の動きをランダムに設定するとより迫力が増します。
これで文字が「バラバラに飛び散り、再び集まって見出しが現れる」ような演出が完成します。
応用編：「破片が下に落ちて消えていく」
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
- 下に落ちる動きを追加して、重力で破片が落ちるように見せる。
- opacityを0にして消滅するので、ガラス片が消えるような演出に。
- 一定時間後に テキストが復元 されるので、クリックで何度も楽しめます。
応用編：「物理演算風で破片が床に落ちて跳ね返る」
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
- JavaScriptで重力と反射をシミュレーション。
- 床に当たると バウンドして徐々に減速。
- 一定時間後に 自然に元の位置に戻る。
応用編：「物理演算風で破片が床に落ちて跳ね返る」
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
- Matter.js を利用して破片に物理演算を付与
- 破片は床に落ちて バウンド → 転がり → 徐々に消える
- クリックすると見出しが破片化
まとめ
ガラスの破片が飛び散るように見出しが現れるアニメーションは、シンプルなCSSと少しのJavaScriptで実現可能です。
特にインパクトを与えたいイベントページや特設サイトにぴったりの表現となります。
ぜひCodePenで試しながら、自分のサイトに合わせた調整をしてみてください！
satokotadesignキャンペーン実施中！
