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

2013/04/02 270 users SONIC コリス スクリプト アニメーション デモ

かっこいいデザインのローディング用アニメーションのCanvas版、アニメーションGIF版、CSSスプライトPNG版を同時に作成できるオンラインサービスを紹介します。 Sonic Creatorの前に、まずはSonicのデモから。 Sonic Sonicは、HTML5 Canvasを使ってローディング用のアニメーションを作成する超軽量（約3K）のスクリプトで、実装方法などは下記をご覧ください。 かな... 続きを読む

ソースコピーで簡単に使えるCSS3とjQueryで作るローディングページ作りました | HTML5でサイトをつくろう

2012/07/04 289 users CSS3とjQuery HTML5 ローデ jQuery 実際

以前の記事で「画像を使わないでCSS3で様々なローディング用アニメーションをつくってみよう」という形でCSS3でローディングアイコンを作成しました。 しかしあのままでは動きませんので今回は、jQueryを利用して実際にサイトでローディングを行う際のサンプルを作成しました。 サイトでローディングを使うと言っても、使用イメージがつかないと思いますので、まずはサンプルをご覧ください。 今回作成するローデ... 続きを読む

画像を使わないでCSS3で様々なローディング用アニメーションをつくってみよう | HTML5でサイトをつくろう

2012/06/13 490 users CSS3 ローディング HTML5 Flash ギミック

スマートフォンのように読み込みに時間がかかるデバイスの場合や、ギャラリーサイトのように複数の画像を読み込む場合、大掛かりなギミックのJSを読み込む場合など、最近はFLASHでなくてもローディングを使用しているサイトをよく見かけます。 今回はそんなローディング用アニメーションをCSS3のグラデーションやアニメーションを使って、画像を使わずに制作する方法を、様々なローディング用アニメーションの種類とと... 続きを読む

[JS]かなりかっこいいデザインのローディング用アニメーションを生成するスクリプト -Sonic | コリス

2011/08/28 482 users コリス 矩形 script SONIC circle

HTML5 Canvasを使って、ローディング用のアニメーションを作成する超軽量（約3K）のスクリプトを紹介します。 デモページ Sonicの実装 Square（矩形）とCircle（円形）を例に実装方法を紹介します。 外部ファイル 当スクリプトを外部ファイルとして指定します。 <script src="sonic.js"></script> JavaScript: Square（矩形） あとは、... 続きを読む