「HTML5で冷気を表現したサイトがすごいな」を分解してみた！ / SQUEEZE - Web Design Studio -
「HTML5で冷気を表現したサイトがすごいな | IDEA*IDEA」で紹介されていた「メンソール系 氷冷エナジードリンク RAIZIN COOL」のリアルな冷気の表現がHTML5/Canvasで作成されているということで、どんな風に出来ているか気になったので分解してみました。 Canvasに透過pngを描画してループさせる (1)(2)(3)と、それぞれに<canvas>を配置します。そこに透過pngで作成されたリアルな冷気画像を、少しずつ動かして描画します。(1)は右から左へ、(2)は時計まわり、(3)は上から下へ。 スムーズなループアニメーション (1)の右から左へのアニメーションの場合、同じ位置に同じサイズで<canvas>を2つ配置して、それぞれに同じ透過pngを描画します。片方は透過pngの幅サイズ分、右にオフセットして画像の右端と左端が継ぎ目なく繋がるようになっています。 マ
画像圧縮ツール ImageOptim がすごい！iPhoneアプリのサイズ問題など - がぶちゃんの日記
iPhoneアプリはサイズを20MB以下に収めないとユーザがインストールしようとした時にWiFiが必要になるので、開発者側としては何としても20MBに収めるためにうんうん悩むわけです。（いままさに） ImageOptimでボタン一発 ImageOptim — better Save For Web でボタン一発でJPEG/PNGファイルのサイズを圧縮してくれます。 あんまりよくわかんない圧縮をするとiPhoneアプリでちゃんと表示されるか心配だったのですが、今のところ不具合はありませんし、Retinaディスプレイで見ても、人間の目では劣化が感じられない（気がする）ので問題なさそうです。（見る人が見ると分かるのかなぁ？） こんな感じでアルファが多い画像は特に圧縮率が高いみたいです。ちなみに、Againでもう一回圧縮してもほとんど圧縮されませんでした。 結果 開発中のiPhoneアプリで使って
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://fukuyama.co/imagealpha
