【デザイン】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

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

関連記事

【WP】ソーシャルブックマークのボタンを追加するプラグイン

WordPressで構築したサイトやブログの記事にソーシャルブックマーク(またはソーシャルメディア)のボタンを追加することができるプラグインをまとめてみました。 ほとんどのプラグインが管理画面のプラグインの検索より探すことができます。 Sharebar 投稿した...続きを読む

2015.02.20WordPress

Webで最も人気のあるフロントエンド·テンプレート『html5-boilerplate』

『html5-boilerplate』は無償でコピー、加工、再配布が可能なHTML5ベースのテンプレートパッケージです。 このパッケージのコンセプトとして、フロントエンド(初期段階)にかかる作業を短縮して、高速で堅牢、柔軟性のあるWEBアプリやサイトを素早く構築すること...続きを読む

2015.02.06HTMLコーディング

【WP】ワードプレスのカスタムメニューのカスタマイズ

先日ご紹介をしたWordPressのカスタムメニューの機能。出力されるタグをみるとクラス名が多く記述されているのがわかります。記述されているクラス名を使いCSSでメニューのデザイン、表示など変更する事も可能ですが、クラス名が多すぎて煩雑になりやすいので、今回はよりカスタマイズ...続きを読む

2015.08.19WordPress

【WP】ワードプレスで使用する名前の付け方の注意事項

WordPressを使用してWEBサイトやブログを構築するとき、ページの名前、カテゴリーの名前、タグの名前などに英単語で名前をつける際に注意することがあります。プログラミングに馴染みのある方にとっておなじみだと思いますが、名前をつけるときには「予約語」を避けることです。 ...続きを読む

2015.08.20WordPress

【JavaScript】ページ内リンクでページスクロールを実現する「smoothScroll.js」

「smoothScroll.js」は、ページ内リンクでページをスクロールを実装できすJavaScriptライブラリです。jQueryを実装していない状態でも稼働するので、手軽に導入できます。 基本的な使い方 導入は簡単、ライブラリを読み込むだけで実装でき、設置後は...続きを読む

2018.02.27HTMLコーディング