• Adobe Dreamweaver CS6 体験版 ダウンロード
• サンプルコードのダウンロード

今回は、jQuery と CSS を使ってごく簡単なクロスフェード効果を実装する方法をご紹介します。Dreamweaver CS 5.5 の CSS パネルを使うとアニメーションも簡単に設定できます。制作するのは写真ギャラリーです。
それでは実際に必要なコードの編集を行います。サンプルコードをダウンロードして、その中に含まれる index.html ファイルを Dreamweaver CS 5.5 で開いてみましょう。
→サンプルコードのダウンロード

クロスフェードによる画像の切り替え

jQuery だけでもフェードの効果を実装することは可能です。ところが、それだとスマートフォン上ではあまり滑らかに動きません。滑らかなフェードを実現して画像の切り替えをするために、画像切り替え時のフェードは CSS で実装します。

サンプルコードでは、3つの画像リストを position:absolute; 属性を使って同じ場所に重ねて表示しています。ここで注意してもらいたいのは、ブラウザで表示される画像は HTML 内で最初に記述された画像ではなく、最後の画像だということです。サンプルでは、demo_01.jpg、demo_02.jpg、 demo_03.jpg の順に並んでいるため、demo_03.jpg が表示された状態になります。

CSSスタイルの追加

CSS スタイルパネルを使って、画像をフェードさせるための属性を追加しましょう。
CSS スタイルパネルの下にあるアイコンをクリックして「新規 CSS ルール」ダイアログを開きます。最後の画像をフェードさせたいので、セレクターに「#gallery li:last-child」と入力して 「OK」 を押します。次に表示されるルール定義のダイアログはそのまま 「OK」 を押して閉じます。

次に、CSS スタイルパネルからプロパティを追加します。追加するプロパティは、透過を指定する opacity と、フェードアニメーションを指定する -webkit-transition の2つです。opacity の値は 0 に、-webkit-transition の値は 2.5s 2.5s と指定すると、画像が表示されてから 2.5 秒後に2.5 秒かけてフェードアウトされます。

尚、CSSには以下のように追加されています。

#gallery li:last-child {
	-webkit-transition: 2.5 2.5;
	opacity: 0;
}

JavaScript で画像の入れ替え

フェードして消えた画像を、重なりの一番下に移動する処理を JavaScript で記述します。サンプルでは既に空の gallery.js ファイルを読み込んでいるので、そこに下の JavaScript のソースを記述します。全部で 12 行です。

jQuery(function($){
    var timer, //変数の宣言
    	galleryMain = $('#gallery'); //要素を変数に格納
            
    //最後の画像を最初に移動
    function fadeGallery(){
    	galleryMain.find('li:last').prependTo(galleryMain);
    };
        
    //5秒毎に画像の移動を繰り返す
    timer = setInterval(function(){
    	fadeGallery();
    },5000);
});

スクリプトの仕組みは単純で、5 秒ごとに一番上に表示されている画像 （最後の画像） を一番下（最初の画像）に移動するだけです。特に内容が分からなくても、このままコピー & ペーストすれば使えます。

アニメーションが繰り返される理由

今回のサンプルは、JavaScript を実行して表示している画像の順番を変えています。画像の順番が変わると、HTMLの最後の要素が表示されるため、表示される画像が変わります。すると、 その度に CSS 属性、すなわち -webkit-transition プロパティが動作し、フェードアウトのアニメーションが実行されることになります。
画像の順番を変えた後の動作は JavaScriptで指定していない、というのが、このサンプルのポイントです。
JavaScript で画像の順序を入れ替える間隔 （上のサンプルでは 5 秒） は、-webkit-transition プロパティに指定した待ち時間（delay）と変化の時間（duration）の合計よりも長くするようにしましょう。
これで滑らかにフェードしながら画像が切り替わるギャラリーの完成です。

• Adobe Dreamweaver CS6 体験版 ダウンロード
• サンプルコードのダウンロード