昨日、記事を書く前に間違って公開してしまった 😀
何にも書いていないのに読みに来てくれた人がいたら、申し訳ないです。

で、本題の jQuery を使った画像切り替えアニメーションについて。
前回の記事で書きましたけど、iPad が登場した影響もあり、数ヶ所の『Flash コンテンツを jQuery を使ったアニメーションに替えよう』というのが今回の趣旨。
Flash コンテンツといっても『GIF アニメーションだとちょっと重たいかなぁ』というのを Flash で作っただけの簡単なアニメーションです。
なので、アクションスクリプトを駆使したようなコンテンツではありません。
当サイトの『XMLファイルを読み込む Flash コンテンツ』などは、Flash コンテンツとして残してあります。

前回紹介した jQuery Canimate Plugin は、PNG ファイルや JPEG ファイルを GIF アニメーションのように使いたい場合にはいいと思う。
今回の jQuery Plugin は、その名のとおりアニメーションというより画像切り替え時のトランジションを実現するスクリプトです。

jqFancyTransitions – jQuery plugin

このスクリプト以外にも画像切り替えトランジション用の jQuery スクリプトは色々とありますが、なぜ今回はこのスクリプトかというと、元々の Flash コンテンツのトランジションに近いという単純な理由で、これを使用しています。
サンプルを見ていただくと一目瞭然ですが、よく似ています。
まぁ、縦と横の違いはありますけど…

サンプルを見る

今回は、『curtain』というエフェクトを使いましたが、それ以外に

• wave
• zipper
• fountain top
• random top
• curtain alternate
• left top
• right bottom

というエフェクトが用意されています。

ストライプの数やディレイ時間など、エフェクト以外のパラメータも用意されていますので、使い勝手も良さそうです。

それにしても、このような動きのあるコンテンツが簡単に設置できる時代になったんですね。
HTML5 + CSS3だけで実現できる動的なコンテンツもありますが、まだまだ jQuery Plugin は活躍してくれそうです。

次回は、また別のスクリプトを…