タグ

関連タグで絞り込む (1)

タグの絞り込みを解除

CSSスプライトに関するtabarkaのブックマーク (2)

  • 連番の静止画をコマ送りでアニメーションさせた話

    問題です。とあるアニメーションデータの各フレームを静止画として書き出した200枚前後のPNGファイルがあったとします。この連番の静止画を秒間30コマでアニメーションさせてください。さあ、どうしますか? この問題にたいして、自作の画像生成ツールを作って解決したというお話です。 先日の案件にて、そんなお仕事がわたしに課せられました。そのときの課題と制約は以下のような感じでした。 IE8以上のブラウザに対応すること iOSデバイスで専用の再生画面を表示することなく再生できること 閲覧時、画面内にスクロールインしたタイミングで自動再生すること 任意のタイミングで再生開始・停止できること 可能な限りファイルサイズを削減すること IE8対応が必要なので、Canvasは使えません。<video>タグはiOSで自動再生できないし、再生ボタンをタップすると画面が変わってしまうのでダメ。好きなタイミングで再生

    連番の静止画をコマ送りでアニメーションさせた話
  • CSSスプライトについてあれこれ。

    CSS Sprites(CSSスプライト)」についてまとめます。 すでにいろんなサイトで紹介されてるので、検索すれば制作手順から何から何までたくさんヒットしますが、それ故、どの方法が一番ベストなのかってのがいまいち不確かだったので、個人的にまとめ直してみることにしました。 TwitterやFacebookのスプライト用画像 CSSスプライトは、サイトの読み込みを高速化する目的で使われているCSSの小技です。TwitterやFacebookなどでは、ちっこいアイコンとかマークを表示するのに使われてますね(2012.8現在)。 具体的には「サイト内で使用するたくさんの画像(パーツ)をなるべく一枚画像にまとめて、サーバへのリクエスト回数を少なくする」という事をやってます。 画像とCSSだけで高速化が実現できるので大変お手軽なのですが、CSSスプライト用の画像を用意するにはちょっとした工夫が必要

    CSSスプライトについてあれこれ。
  • 1