【デザイン】HTML5を使用したアニメーションサイト

html5-animation-website

HTML5より新しく登場した「Canvas」などによって、AdobeのFlashのような動的な2次元グラフィックを、HTML形式ファイルをベースに制作することができるようになりました。

今後、デザインとして設計されるのはもちろん、アニメーションやゲーム、WEBアプリケーションなどに取り入れられ注目されそうです。

今回は、主にHTML5で制作された事例を集めてみました。実際にサイトを見る場合は、最新バージョンのGoogle Chrome、またはFirefoxにて閲覧をしてみてください。

HTML5 Experiment

WEBアプリやモバイル開発を行っている「9elements」のHTML5のパフォーマンスを検証する実験的なサイトのようです。twitterのつぶやきの点がきらめく幻想的なアニメーションになっています。

html5-experiment

Ball Pool

開発者の「MR.doob」氏の実験サイトです。ボールプールの名前の通り、画面内にたくさんのボールが描画されてます。ボールをマウスでドラックして動かしたり、マウスをクリックするとボールが飛び出したりします。

ball-pool

JS Fireworks

開発者の「Kenneth Kufluk」氏の実験サイトです。JQueryを組み合わせて、入力されたメッセージが打ち上げ花火で表示されます。

js-fireworks

事例としては、実験的なサイトが多いようですが、今後、実用的に取り入れられそうです。

関連記事

【フォト】蓮華寺池公園フォトギャラリー《こどもの日》

静岡県藤枝市にある「蓮華寺池公園」。市の花でもある藤の花が見頃になる4月末から5月初旬まで藤まつりが開催されます。期間内にこどもの日もあることから、公園内に鯉のぼりがのぼります。新緑に青い空、湖の風景は風情がありますね。 フォトギャラリー ※写真をクリックすると拡大表示し...続きを読む

2019.05.14フォトギャラリー藤枝

MakeShop(メイクショップ)の販売代理店となりました

デザインスタジオ・エフではこのたび、GMOグループのMakeShop(メイクショップ)の販売代理店となりました。 月額無料から利用できるショッピングカート。MakeShopは、ネットショップの開店から運用までの一連の作業を効率化し、ネットショップオーナーをサポートします。 ...続きを読む

2015.03.24

【WP】ログインページをカスタマイズする方法

WordPressのログインページはプラグインなどを利用してカスタマイズすることができます。 今回は、プラグインを使わずにアクションフックを利用してWordPressのログインページで利用されるCSSをカスタマイズしてオリジナルのデザインに変更する方法をご紹介します。 ...続きを読む

2015.02.25WordPress

【デザイン】印象に残るビジネスカードデザイン

名刺は自分たちのことを覚えてもらうために重要なビジネスツールです。そこで受け取ったら印象に残るであろうデザインのビジネスカードを集めてみました。 Tok&Stok(Business Card) ブラジルの家具メーカー「Tok&Stok」のビジネスカード...続きを読む

2015.02.15インスピレーション

【CSS】スタイルシートが適用される優先順位について

WEBサイトのデザインでは定番になっているCSS(カスケーディング・スタイル・シート)。最近では、CSSで出来ることも多くなり、自然と記述する内容を多くなってきています。また外部のライブラリーなどを読み込むとCSSのボリュームが増えます。 そうなると、同じ名前の宣言で異...続きを読む

2015.02.06HTMLコーディング