CSSとHTML Canvasで作るモーショングラフィック - ICS MEDIA
ICS MEDIAのトップページに掲載しているモーショングラフィック。これはCSSとHTML Canvas要素を使って作成したものです。時間経過とともに波の形状と色彩が変化し、多彩な表現を楽しめるようになっています。 本記事ではCSSとHTML Canvasの理解につながることを目標に、このモーショングラフィックの作成方法をステップ形式で解説します。サンプルのソースコードはすべてGitHubにて公開していますので、あわせて参照ください。 ▲ 完成版サンプル ステップ1. CSSでグラデーション背景の作成 サンプルを別ウインドウで開く ソースコードを確認する はじめに、時間経過で色彩が変化するグラフィックを作成しましょう。CSSで縦に長いグラデーションの背景を用意し、CSSアニメーションを使って縦方向に移動させることでグラデーションが変化する表現ができます（ステップ1のソースコード)。 #b
hitagi.js - HTML5向けゲームフレームワーク MOONGIFT
Webブラウザの機能がアップし、さらにハードウェアの性能が向上するのに合わせて実行速度も速くなっています。ちょっと前のゲームレベルであれば十分にWebブラウザ上でこなせるようになっています。 そんなWebブラウザを活用してゲーム開発を行えるのがhitagi.jsです。 hitagi.jsの使い方 hitagi.jsを使ったデモです。 Canvasを使って描画しています。 new hitagi.World() から処理がはじまっています。 Flappy Bird風ゲームもあります。これくらいのゲームであればWebブラウザでも十分です。 ちゃんとクリックで遊べるようになっています。 hitagi.jsはCanvasへの描画なので性能が良いのがポイントです。また、Canvasさえ使えればブラウザに関係なく利用できるのも利点と言えるのではないでしょうか。hitagi.jsは2D系ゲームに使えるよう
HTML5デモ「日本全国花粉飛散マップ」を作って分かったCreateJSとTypeScriptでの効率的な開発手法 - ICS MEDIA
HTML5デモ「日本全国花粉飛散マップ」を作って分かったCreateJSとTypeScriptでの効率的な開発手法 2013年3月15日に開催されたCreateJS勉強会（第2回）で発表したWebサイト「日本全国花粉飛散マップ」ですが、CreateJSとTypeScriptを使って制作しました。 今回の作品のポイントとしては、次の3点があげられます。本記事では次を具体的に説明します。 HTML5で制作、デスクトップだけでなくスマートフォンやタブレットでも再生可能 CreateJSで、DOMではできないHTML5 Canvasならではの表現 TypeScriptを用いて低学習コストで効率的な制作の実現 スマートフォンやタブレットでも閲覧可能 このWebサイトは環境省が提供している資料を元に、過去9年分の花粉の飛散量をパーティクルを用いてビジュアライズしたものです。花粉の量に比例して、パーティ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
