今回は、CSSアニメーションを使って、ちょっとしたスライドショーを作ります。 (第10回のつづき、アニメーション実装です。)

サンプルを見る

今回のサンプルは、setIntervalを使って、画像をローテーションさせ、アニメーションをtransitionで定義しています。

※今回も、CSS3の「transitionプロパティ」に対応した「Firefox」「Chrome」「Safari」でしか動作しません。残念ながら現時点ではIEは「transitionプロパティ」には対応していません。

座標の移動

前回、「popメソッド」と「unshiftメソッド」を利用して、配列の並びを変える処理を解説しましたが、実際にそれだけでは配置されている座標は変更されません。

「transitionプロパティ」の特性として、値が変更されたらアニメーションを実行するので、言ってしまえば座標さえ変更すればアニメーションは実装されるということになります。

それを踏まえて下の図を見てください。 この図では、配列の末尾を千頭に移動した時に、並びの画像と配列の関係性を表しています。

一番右側の画像が、配列の最後尾である場合、「popメソッド」と「unshiftメソッド」を実行すると、一番右側の画像が配列の0番目となり、その他の画像は、配列のインデックスが一つ増えます。

そして、「インデックスが0の場合は-400に配置する」など、 前もって、配列のインデックスによって決められた座標が設定されるようにしておけば、配列の並びを変えたときに、その処理を実行することで、配列の並びと座標を関連付けることができます。

以下がそのコードになります。

var boxArray = new Array();
var width = 400;
var ID;
$(function ()
{
    //位置を初期化
    for(var i = 0 ; i < 6 ; i++)
    {
        boxArray.push("#box" + i);
        //スライドショーで移動させるため、左にずらしておく
        var xPos = width * i - width;
        $(boxArray[i]).css("transform" , "translate(" + xPos + "px,0px)");
    }

    //ローテーション開始
    ID = setInterval(intervalFunc , 2000);

    //ロード時に、transitionが走ってしまうため
    //一旦非表示にしていたエレメントを元に戻す。
    setTimeout(function()
    {
        for(var i = 0 ; i < 6 ; i++)
        {
            $(boxArray[i]).css("display" , "block");
        }
    } , 100);
});

function intervalFunc()
{
    var len = boxArray.length;

    //配列の末尾を先頭に移動
    var tmp = boxArray[len - 1];
    boxArray.pop();
    boxArray.unshift(tmp);

    for(var i = 0 ; i < len ; i++)
    {
        var xPos = width * i - width;
        $(boxArray[i]).css("transform" , "translate(" + xPos + "px,0px)");
        $(boxArray[i]).css("z-index" , i);
     }
}

画像の横幅が400pxなので、基準幅を400とし、配列の並びによって

for(var i = 0 ; i < len ; i++)
{
    var xPos = width * i - width;
    $(boxArray[i]).css("transform" , "translate(" + xPos + "px,0px)");
    $(boxArray[i]).css("z-index" , i);
}

この様に、「配列のインデックスに400を掛けた数から400」を引く」という処理を入れることで、それぞれ[-400 , 0 , 400 , 800 , 1200 , 1600 ...]という数値になります。

あとはコーディングで、画像を全て「position:absolute」に設定し、下の図の赤枠の外が表示されないように、親要素を「overflow:hidden;」にします。

以上で、スライドショーが実行されると思います。

なお、今回は位置の設定に「transformプロパティ」を使っています。 「transformプロパティ」を使うことで、スマートフォンでのパフォーマンスが向上済ます。 ただ、IEなどのレガシーブラウザでは使えないため、どうしても古い環境に対応させなくてはいけない場合は、「leftプロパティ」を使い、$(boxArray[i]).css("transform" , "translate(" + xPos + "px,0px)");の部分の処理を、jQueryの「animateメソッド」を使うとよいでしょう。

河野　義貴
インハウスのFlashクリエイターとして勤務後、2010年独立。一年間のフリーランス期間を経て、2011年9月にスウィーツアンドストリーム株式会社を設立。主にFlash・HTML5を駆使した、PC・スマートフォン向けインタラクティブコンテンツを中心に活動中。マイナビクリエイターセミナー（WCBセミナー）の講師としてもおなじみ。