var _gaq = _gaq || []; _gaq.push([\'_setAccount\', \'UA-13211647-1\']); _gaq.push([\'_trackPageview\']); (function() { var ga = document.createElement(\'script\'); ga.type = \'text/javascript\'; ga.async = true; ga.src = (\'https:\' == document.location.protocol ? \'https://ssl\' : \'http://www\') + \'.google-analytics.com/ga.js\'; var s = document.getElementsByTagName(\'script\')[0]; s.parentNode.insertBefore(ga, s); })();
Wish to be a programmer rather than a coder
Auto AnimateImage は AnimateImage スクリプトを自動的にサイトに適用する WordPress プラグイン。AnimateImage は複数の画像をアニメーション GIF のように連続表示することができる。次のような img
要素を書くだけで自動的に画像がアニメーションされるようになる。
<img src="images/0.png" data-files="[0-9].png" />
アニメーション GIF は最も一般的なアニメーション形式だが 256 色までしかサポートされない。代替アニメーション形式に APNG, MNG (JNG), Motion JPEG, SVG Animation などがあるが、現時点では Web ブラウザーによって広くサポートされていない。このような理由から AnimateImage はアニメーション画像のための最も適切な方法といえる。
img
要素を書くだけ。JavaScript もショートコードもギャラリーも不要。data-files
属性を持つ img
要素が自動的にアニメーションされる。JavaScript は記述不要。data-files
属性を持つ img
要素を記述するだけで、自動的に画像がアニメーションされる。連番、ゼロ詰めされた連番、連続したアルファベット、そして任意のファイル名の複数の画像をアニメーション可能。
<img src="sequential/0.png" data-files="[0-99].png" /> <img src="zero-padded/00.png" data-files="[00-99].png" /> <img src="lowercase/prefix-a.png" data-files="prefix-[a-z].png" /> <img src="uppercase/A_suffix.png" data-files="[A-Z]_suffix.png" /> <img src="arbitrary/foo.png" data-files="[foo, bar, baz].png" /> <img src="parent/child0/image.png" data-files="child[0-9]/file.png" />
AnimateImage は多数のアニメーションオプションに対応している。例えばアニメーション間隔、繰り返し回数、巻き戻し、一時停止、空白画像など。各オプションは以下のように data-*
属性で指定する。
<img src="" data-files="" title="" alt="" id="" class="" style="" data-delay="" data-cycleDelay="" data-repeat="" data-rewind="" data-pauseAtFirst="" data-pauseAtLast="" data-showBlank="" data-blankClassName="" data-blankPath="" data-stretchBlank="" />
詳しくはコード記述例を参照。
※ animate-image.min.js はコメントや改行、不必要な空白などの削除によりファイルサイズが縮小されている。またローカル変数や関数の引数の名前は短縮されている。一方で animate-image.js は読みやすいように整形されているほか、ドキュメンテーションコメントが JSDoc スタイルで記述されている。
Web browsers
data-files
属性を持つ img
要素を記述するdata-files
属性を持つ img
要素を記述するwp-content/plugins/
ディレクトリーにアップロードするdata-files
属性を持つ img
要素を記述するAuto AnimateImage 設定画面で利用可能なオプション一覧。以下のオプションを通して共通オプションやアニメーションスタイルをカスタマイズすることができる。>
まず data-files
属性が正しい書式文字列か確認する。次にエラーコンソールにメッセージが出力されていないかチェックする。
問題が解決しない場合は、サポートフォーラムまたはコンタクトフォームからサイト URL をお送りください。
Poedit と “languages/animateimage.pot” ファイルを使用してローカライズ可能。詳細は Localization を参照。
AnimateImage
名前空間オブジェクトから AnimateImage の機能にアクセス可能。
AnimateImage.options.delay = 1000; AnimateImage.animate('images/[0-9].png'); var animator = new AnimateImage.Animator('images/[0-9].png'); animator.animate(); // animator.stopAnimate();
詳細は AnimateImage 公式サイトを参照。
<img src="sequential/0.png" data-files="[0-99].png" /> <img src="zero-padded/00.png" data-files="[00-99].png" /> <img src="zero-padded/000.png" data-files="[000-999].png" /> <img src="lowercase/prefix-a.png" data-files="prefix-[a-z].png" /> <img src="uppercase/A_suffix.png" data-files="[A-Z]_suffix.png" />
<img src="arbitrary/foo.png" data-files="[foo, bar, baz].png" /> <img src="arbitrary/foo.png" data-files="[foo.png, bar.jpg, baz.gif]" /> <img src="prefix-foo_suffix.png" data-files="prefix-[foo, bar, baz]_suffix.png" />
<img src="parent/child/file0.png" data-files="file[0-9].png" /> <img src="parent/child0/image.png" data-files="child[0-9]/file.png" /> <img src="parent0/child/image.png" data-files="parent[0-9]/child/file.png" />
※ data-files
属性は書式文字列を含むファイル名またはディレクトリまでの相対パスで指定する。
<img src="images/0.png" data-files="[0-9].png" title="foo" /> <img src="images/0.png" data-files="[0-9].png" title="foo" alt="bar" /> <img src="images/0.png" data-files="[0-9].png" alt="bar" />
※ alt
属性が指定されない場合は title
属性と同じ値が指定される。
<img src="images/0.png" data-files="[0-9].png" id="foo" /> <img src="images/0.png" data-files="[0-9].png" class="bar" /> <img src="images/0.png" data-files="[0-9].png" class="" />
※ class
属性が指定されない場合は追加される。class
属性のデフォルト値は "animation"
。
<img src="images/0.png" data-files="[0-9].png" data-delay="1000" /> <img src="images/0.png" data-files="[0-9].png" data-cycleDelay="2000" />
※ delay
オプションのデフォルト値は 500
ms, cycleDelay
オプションのデフォルト値は 0
ms
<img src="images/0.png" data-files="[0-9].png" data-repeat="1" /> <img src="images/0.png" data-files="[0-9].png" data-repeat="1" data-rewind="true" />
※ repeat
オプションのデフォルト値は -1
(無制限に繰り返す), rewind
オプションのデフォルト値は false
<img src="images/0.png" data-files="[0-9].png" data-pauseAtFirst="true" /> <img src="images/0.png" data-files="[0-9].png" data-pauseAtLast="true" />
※ pauseAtFirst
オプションのデフォルト値は false
, pauseAtLast
オプションのデフォルト値は false
<img src="images/0.png" data-files="[0-9].png" data-showBlank="true" /> <img src="images/0.png" data-files="[0-9].png" data-showBlank="true" data-blankClassName="foo" /> <img src="images/0.png" data-files="[0-9].png" data-showBlank="true" data-blankPath="blank.png" /> <img src="images/0.png" data-files="[0-9].png" data-showBlank="true" data-blankPath="logo.png" data-stretchBlank="false" />
※ showBlank
オプションのデフォルト値は false
, blankClassName
オプションのデフォルト値は "blank"
, blankPath
オプションのデフォルト値は data:image/gif;base64,...
, stretchBlank
オプションのデフォルト値は true
<img src="images/0.png" data-files="[0-9].png" width="100" height="100" longdesc="long description" />
<img src="images/0.png" data-files="[0-9].png" style="border: solid; border-top: dotted; border-bottom: dashed" />
連番のファイル名からなる 32 ビット色の透過 PNG アニメーション。
※ その他のデモは AnimateImage 公式サイトの「デモ」を参照。
いただいたコメントは大変参考になります。ここまで読んでいただきありがとうございました。
“keyboard keys” by chromatix is licensed under Creative Commons License.