Webページ上で、画像が重力で落下して跳ね返る──そんな動きに魅了された経験はありませんか？この記事では、物理演算ライブラリ「Matter.js」を活用して、ランダムな大きさの円形画像が落下し、1つだけ色が強調される演出「ImpactSphere」を作る方法を解説します。
完成デモはCodePenで公開しています →
See the Pen Untitled by masakazuimai (@masakazuimai) on CodePen.
Matter.jsとは？
Matter.js は、JavaScriptで物理演算をシミュレーションできる軽量なライブラリです。重力、衝突、摩擦、反発など、リアルな動きをWeb上で簡単に再現できます。
今回のアニメーションでは、次のような要素をMatter.jsで制御しています：
- 円形画像のランダム落下
- 壁に当たると跳ね返る
- ドラッグ操作で移動可能
- 特定の1つだけ色を変えて注目度をUP
今回作る「ImpactSphere」の特徴
- PNG形式の円形画像を使用
- JavaScriptで16個の円をランダムサイズで配置
- 3つ目だけ、黒い部分を赤に強調表示（擬似要素＋CSSマスク）
- すべて重力・衝突あり、ドラッグで移動可能
Webページの導入アニメーションやバナー演出、キャンペーンなどに応用可能です。
実装のポイント
1. Matter.jsの導入
まずはCDNでMatter.jsを読み込みます。
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js"></script>2. 画像生成と物理ボディ作成
JavaScriptで円形の画像要素を作成し、それぞれにMatter.jsの物理Bodyを割り当てます。
16個の円をforループでランダムサイズに設定し、3番目の円（インデックス2）にだけspecialクラスを付与します。
3. CSSによる赤マスクの適用
画像の上に擬似要素（::before）を重ね、CSSのmask-imageでマスク処理を行うことで、黒い部分だけ赤く見せる演出を実現します。
.special::before {
content: '';
position: absolute;
inset: 0;
background-color: red;
mask-image: url("your-image.png");
mask-mode: luminance;
-webkit-mask-image: url("your-image.png");
-webkit-mask-mode: luminance;
}4. DOMと物理演算の同期
毎フレームごとに、Matter.jsの物理ボディの位置と角度をDOMに反映させることで、リアルな見た目を実現します。
応用アイデア
- 特定の色でユーザーに注目させる
- クリックでアニメーションに変化をつける
- WebGLやCanvasと組み合わせてより高精度な演出へ
- 複数色に分岐、ステータスごとに色変化
ImpactSphereは、演出としてだけでなく、UX向上にも活用できます。
jQueryでは作れる？
jQuery単体では、重力や衝突といった物理演算を扱うことができません。擬似的なアニメーションは可能ですが、今回のような本格的な物理アニメーションはMatter.jsのような専用ライブラリの使用が不可欠です。
まとめ
ImpactSphereは、
- Matter.jsによる本格的な物理演算
- 擬似要素＋マスクによる色変更演出
- DOMと物理のリアルな同期
を組み合わせた、見た目にも動きにもインパクトのあるアニメーションです。
コードはCodePenにて公開しています。ぜひカスタマイズして、自分だけの演出に発展させてみてください！