Canvasを使ったカッコいいドットアニメーション

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

Shooting Star(シューティングスター)

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

Thpace(スペース)

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

Dots Countdown(ドットカウントダウン)

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

Moving dots animation in Canvas(ムービングドット)

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

Floating Dots Pixi Version(フローティングドット)

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

Psychedelic waves(サイケデリックウェーブ)

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

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

まとめ

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

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

お困りのことがありましたら
お気軽にご相談ください