ちいつる

ジェネラティブ演出

パーティクルテキスト

テキストをオフスクリーンcanvasへ描画し、ピクセルをサンプリングして粒子の目標座標にする。粒子はバネで文字の形へ帰巣し、カーソルを近づける/タップすると反発して散り、離れるとまた文字に戻る。

ENGLISH

Particle Text Formation

  • JS
  • Canvas
150ジェネラティブ演出 の一覧 →

プレビュー

ホバー

操作カーソルを乗せると動きます(スマホはタップ)。

実装メモ

TEXT変数の文字列を差し替えて使えます。フォント読み込み前にサンプリングすると字形が崩れるため document.fonts.ready を待ってから再サンプリングしています。

コード(コピーして使えます)

<div class="pt-wrap">
  <canvas class="pt-canvas" aria-hidden="true"></canvas>
</div>

タグ

関連パーツ