背景にも使えるCanvasのカッコいいドットアニメーションを6つご紹介します。

Shooting Star（シューティングスター）

スターと言うだけあって、とても綺麗な表現のアニメーションになります。カーソルを追いかけて星が現れるので、どうしてもカーソルをくるくる回して遊びたくなってしまいますね。

Thpace（スペース）

あまり見たことがない、宇宙のようなイメージのアニメーションになります。色とか調整したら色んな場面の背景に使っても良さそうなアニメーションですね。

Dots Countdown（ドットカウントダウン）

ドットを使って文字を表すなんてあまりないので紹介しました。ソースを改造すれば日本語もいけるかな？

Moving dots animation in Canvas（ムービングドット）

これは、このままサイトの背景にしても良いドットアニメーションですね。シンプルなサイトにも使えそうですね。

Floating Dots Pixi Version（フローティングドット）

最近多くなったフローティングドットのアニメーションです。ほとんどのサイトが動画形式でファーストビューの背景に入れていますが、このcanvasを使えばソースだけで自由にカスタマイズして背景にできそうですね。

Psychedelic waves（サイケデリックウェーブ）

もうドットじゃないですね；とても綺麗で海外の方から人気だったのでご紹介しました。

どのようにホームページデザインに取り込むかはさておき、あまり見ないアニメーションです。

まとめ

Canvasを利用すれば、ホームページの背景は更に楽しいものにすることができます。

どんどん処理が高速化するPC・スマホなので、是非、Canvasを利用して更に見ていて楽しいホームページを作ってみましょう。