on:2012年6月15日sponsorsCSSスプライトを使って、映画のフィルムを再生するように画像をアニメ化するjQueryのプラグインを紹介します。操作は下記キャプチャのようにボタンをはじめ、ドラッグにも対応しており、アニメーション再生のスムーズ機能も備えています。tape![ad#ad-2]fc.tapeの仕組み実装の基本デモと実装方法fc.tapeの仕組み使用する画像は、映画のフィルムのように少しずつ動かしたものを用意します。デモで使用している画像の一部この画像をCSSスプライトで表示し、アニメーションをコントロールします。画像の作成には「ImageMagickを使用すると、フォルダ内の全ての画像からスプライト用の一枚の画像を生成できます。実装の基本アニメーションを配置するdiv要素、サイズなどを指定するスタイルシート、コントロールするスクリプトが基本構成です。以下、デモとともに実装方法を紹介します。NextボタンとPrevボタンアニメーションを一コマずつボタン操作で動かします。指定フレーム間のアニメーション現在のフレームから指定フレームまでアニメーションさせます。windToは指定フレームに直接移動、stepInToは指定フレームまでアニメーションです。アニメーションのスムーズ化フレーム数が少ない場合はアニメーションをスムーズに再生できるオプションがあります。ドラッグ操作でのアニメーションドラッグ操作でアニメーションさせることもできます。オンラインショップでよく見かけるように商品をドラッグでぐるぐる回転させます。Posts関連記事が見つかりませんでした。