[JS]自分仕様のかなりかっこいいローディング用アニメーションを生成できる -Sonic Creator

かっこいいデザインのローディング用アニメーションのCanvas版、アニメーションGIF版、CSSスプライトPNG版を同時に作成できるオンラインサービスを紹介します。

Sonic Creatorの前に、まずはSonicのデモから。

サイトのキャプチャ

Sonic

Sonicは、HTML5 Canvasを使ってローディング用のアニメーションを作成する超軽量(約3K)のスクリプトで、実装方法などは下記をご覧ください。

今回紹介するのは、このSonicをコードベースでオンラインで簡単に設計でき、それをアニメーションGIFやCSSスプライト用のPNG画像を生成するオンラインツールです。

サイトのキャプチャ

Sonic Creator

使い方は簡単です。
まずは、ギャラリーからベースとなるローディングのデザインを選択します。

サイトのキャプチャ

一番左のデザインを選択

デザインを選択すると、そのローディングのコードを表示します。

サイトのキャプチャ

コード

コードはオンラインで編集可能で、カラー・スピード・サイズなどを簡単に変更できます。

編集したコードはすぐにCanvas版に反映されます。

サイトのキャプチャ

Canvas版

同時に、アニメーションGIF版も生成されます。

サイトのキャプチャ

アニメーションGIF版

CSSスプライト用のPNG版も生成されます。

サイトのキャプチャ

CSSスプライト用のPNG版

「View the CSS3...」をクリックすると、PNG版用のCSS3も生成されます。

サイトのキャプチャ

PNG版のCSS3のコード

top of page

©2017 coliss