Canvas エフェクト

Canvas エフェクトに分類されるWeb表現技法12件。パーティクル接続(星座)、マウス追従粒子トレイル、花火アニメーション、降雪・雨エフェクト切替 など。ライブデモとコピーできるコード付き。

中級

パーティクル接続(星座)

近い粒子同士を線で結び星座のように見せる定番表現。マウス付近の粒子も結線します。ヒーロー背景やローディング演出に最適です。

中級

マウス追従粒子トレイル

ポインタの軌跡に沿って虹色の粒子を放出し、加算合成で発光させるインタラクティブ演出。カーソル装飾やゲームUIに使えます。

中級

花火アニメーション

打ち上げ弾が頂点で爆発し放射状に火花が飛ぶ物理風の花火。自動打ち上げに加えクリックでも発射できます。お祝い・達成演出に。

初級

降雪・雨エフェクト切替

ゆらゆら舞う雪と斜めに降る雨をボタンで切り替えられる天候エフェクト。季節のランディングページやヒーロー背景に重ねて使えます。

初級

マトリックスレイン

カタカナや数字が緑の軌跡で流れ落ちる映画風デジタルレイン。残像合成と先頭の発光で雰囲気を出します。テック系の演出やイントロに。

中級

多層サイン波アニメ

振幅と周波数の異なる正弦波を加算合成しネオン状に発光させる波形ビジュアル。音楽・オーディオ系のヘッダー背景に向いています。

中級

お絵描きキャンバス

ポインタ操作で線を描き、色パレットと太さスライダー、クリア機能を備えた簡易ペイント。署名入力やメモ、落書き機能の土台になります。

上級

重力で集まる粒子フィールド

マウスへの引力で粒子が集まり、クリックや右クリックで弾け飛ぶインタラクティブな重力シミュレーション。遊び心のある背景やヒーローに。

上級

フローフィールド(流れ場)

三角関数で作った疑似ノイズの流れ場に沿って大量の粒子が漂い、繊細な流線アートを描く生成的ビジュアル。アンビエントな背景に最適です。

中級

オーディオビジュアライザー(Web Audio)

合成オシレータの和音を AnalyserNode で解析し、周波数バーと波形を同時に描く音響ビジュアル。マイク不要で再生ボタンから開始でき、音楽系UIやヒーロー演出に使えます。

上級

パーティクル文字

テキストのピクセルをサンプリングし、その座標へ無数の粒子が集まって文字を形成。マウスを近づけると弾け、離れると吸い寄せられて戻るインタラクティブ表現です。

中級

メタボール(リキッド)

動き回る複数の円が近づくと滑らかに融合して見えるメタボール表現。距離場のしきい値で輪郭を描き、粘性のある液体のような有機的ビジュアルを生成します。