動く吹き出しアイコン デモ

再生ボタンを押すと、セリフが1文字ずつ表示され、話している人のアイコン動画だけが動きます。 これは静的サイト向けのサンプルで、サーバー側の処理は使っていません。

自分のサイトで使うには

このフォルダ(index.html と assets/)をそのままサイトに置くだけで動きます。 セリフを変えたいときは、このファイル末尾のスクリプトにある SCRIPT 配列を書き換えてください。 人物を変えたいときは assets/ の動画(mp4 / webm)とポスター画像(webp)を同じ名前で差し替えます。 動画はアイコン用に幅480px・6秒に軽量化済みです(1本あたり約100〜400KB)。