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

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

関連記事

【ツール】レスポンシブサイトの確認に便利なViewportエミュレーター『Dimensions』

レスポンシブサイトを制作すると、PCやスマートフォン、タブレットでそれぞれ表示が異なるため、表示もそれぞれの端末に合わせたサイズでの確認が必要になります。 そこで便利なツールとして、Google Chromeのアプリに端末サイズごとのシミュレーションができる『Dimen...続きを読む

2015.02.10HTMLコーディング

Hair Lounge Credo様WEBサイト制作

伊豆市小立野にリニューアルオープンした美容室Hair Lounge Credo(ヘアラウンジクレド)様のWEBサイトを制作いたしました。店舗のリニューアルあるに合わせてWEBサイトもリニューアル!店舗の空間デザインに合わせて、ウッドやレンガ調、蔦などのイメージをWEBサイ...続きを読む

2016.07.06WEBサイト制作美容室

焼津おんぱく2018 「No30.焼津のスポットを歩き巡る インスタ映えする写真の撮り方講座」

カメラマンとして、焼津おんぱく2018 「No30.焼津のスポットを歩き巡る インスタ映えする写真の撮り方講座」のプログラムの案内人をしました。 風が強く、雲が少し多い日でしたが、天気にも恵まれ、タイミングにもめぐまれ、参加者さんみんなに楽しんでいただき、焼津の魅力を再発見...続きを読む

2018.02.14フォトギャラリー焼津

【HTML】Sass・SCSSを使ってWEBサイトの制作を効率化する

現在の多くのWEBサイトではHTMLとCSSによって構築されています。WEBサイトの制作方法を勉強するとHTMLとCSSについてを学ぶと、ここ最近は、SassやSCSSといったキーワードが出てきます。SassやSCSSを活用しなくても、もちろんWEBサイトを制作することが...続きを読む

2019.05.13HTMLコーディング

モバイル端末の画面サイズまとめ

WEBサイトを制作するときのサイズの基準になるのが画面の解像度です。 基本的には、ディスプレイサイズに合わせてデザインされるので、横幅が920px~1024pxあたりでレイアウトされるのが主流といえます。 最近では、スマートフォンやタブレットなどでWEBサイトを閲覧する機...続きを読む

2015.02.06HTMLコーディング