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

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

関連記事

【JavaScript】各種ユーザーインターフェイスを実装するライブラリ『jQuery UI』

『jQuery UI 』は一般的なメニュー、アコーディオン、タブなどの多岐にわたるユーザーインターフェイスを実装することができるjQuery対応のJavaScriptライブラリです。 jQuery UI 『jQuery UI 』を用いることで「Interactions...続きを読む

2015.02.10HTMLコーディング

【WP】標準ギャラリーをスライド式にするプラグイン『WordPress Canvas Gallery』

『WordPress Canvas Gallery』は、WordPressの標準ギャラリーをスライド式のギャラリーに対応させることができるプラグインです。 『WordPress Canvas Gallery』ダウンロード プラグインは「wordpress.org」のプ...続きを読む

2015.02.18WordPress

【デザイン】写真加工による幻想的なアートの世界

実際の写真を加工して幻想的で不可思議な世界を作るフォトグラファー Erik Johansson 氏の作品をご紹介します。 Erik Johansson Photographer Erik Johansson ...続きを読む

2015.03.10インスピレーション

【Win10】Office 2016 の一部が英語表記になり戻らない

Microsoft Office 2016 を Windows10 の環境で利用していたところ、いつの間にか、画面の一部が英語になってしまいました。リボンなどのUI部分ではなく、作業中にポップアップされる操作画面のごく一部の日本語が英語になるという半端な状態です。 修正...続きを読む

2021.01.24Windows10パソコンの使い方

美容室トップスタイル様WEBサイト制作

富士宮市にあるトータルビューティーサロン『美容室トップスタイル』様のWEBサイトを制作いたしました。南国ムードあふれる癒し系美容サロンをテーマにスタッフの笑顔で出迎えることができるデザインにいたしました。 クライアント美容室トップスタイル様 U...続きを読む

2015.04.08WEBサイト制作美容室