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

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

関連記事

美容室グランディール様WEBサイトのリニューアル

富士宮市にある『美容室グランディール』様のWEBサイトのデザインをリニューアルいたしました。上質な空間を演出できるように、よりナチュラルな印象に、おしゃれで可愛らしい雰囲気のデザインに仕上がりました。 インスタグラムでの投稿と連携して、写真が表示されるようになっております。...続きを読む

2018.02.06WEBサイト制作リニューアル美容室

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

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

2018.02.27HTMLコーディング

「アイミツ」にて弊社を紹介していただきました

株式会社ユニラボ ( unilabo Inc. )が運営する「アイミツ」にて、『「本当におすすめできる9社をピックアップ」静岡市のホームページ制作会社をアイミツが徹底調査! 』として、デザインスタジオ・エフを紹介していただきました! https://imit...続きを読む

2020.11.27

GoogleのSEO動物園

検索エンジンのGoogleにおいてSEO対策で動物園と言われても何のことなのかと思ってしますが、Googleの動物園には有名なところで「パンダ」「ペンギン」「ハミングバード」がいます。 実際の動物がいるのではなく、Googleでサイトなどを分析するアルゴリズムの名前に「...続きを読む

2015.02.14SEO

【HTML】Adobe Dreamweaverを使いSass・SCSSをコンパイルする方法

前回、ブログにて「Sass・SCSSを使うことでWEBサイトの制作を効率化すること」をとりあげました。そこでSass・SCSSは、どちらもCSSを効率よく記述することができること。そして、Sass・SCSSを変換(コンパイル)してCSSとして書き出してWEBサイトに組み込むことを...続きを読む

2019.05.16HTMLコーディング