daikixのブックマーク - はてなブックマーク

daikix id:daikix

ブックマーク / clockmaker.jp (2)

HTML5演出に最適な複数画像読み込み管理のJSライブラリ「LoadManager.js」 | ClockMaker Blog
HTMLで複数の画像を読み込むとき、HTMLのimgタグだけだと不恰好となりがちですが、読み込みを管理すれば見栄えも整いますというデモとJSライブラリを作ってみました。次の2つのデモを見比べて何が違うのか確認ください。デモ (通常のimgタグ) デモ (LoadManager.jsを使用) デモの違いとは前者は画像がバラバラとインターレース的に読み込まれ、後者は読み込み終わるまでローディングが表示され読み込まれたものがフェードインして表示されます。 ▼前者のデモ ▼後者のデモ後者のデモには、ローディングのパーセンテージ表示も付いています。読み込みが何%まで達しているかを確認できるのも、後述のJSライブラリのメリットです。 HTML5で作られたフルFlash的なサイトを見たときにimgタグでインターレース的に画像がバラバラとでてくることが多くて、いつも微妙な思いをしていました。Flas
daikix 2012/02/15
javascript
リンク
HTML5 Canvasを始めよう：EaselJSを使った流体パーティクル入門 | ClockMaker Blog
HTML5のCanvasをFlashライクに使えるようにするJavaScriptライブラリ「EaselJS」で流体パーティクルのデモを作ってみました。 demo source EaselJSを使えばFlashのようにHTML5 Canvasを使うことができるので、ActionScriptから概念だけではなくコードの再利用性が高まります。今回は流体パーティクルの表現を通して、EaselJSとCanvasのテクニックを紹介していきます。デモの作り方冒頭のデモですが、私が以前作成したFlashの作品「Flashの高速化を試す、Bit mapDataを配列に格納することで2〜3倍の高速化」から移植したものです。さて、このデモをHTML5 Canvasに展開するにあたり、特に抑えておきたいのは次の点だと思いました。フォースマップの作成パーティクル情報を付与した表示クラスの作成フォースマップ
daikix 2012/02/07
html

javascript
リンク
1