CSS3でアニメーション【番外編】- CSS3アニメーションで動作するjQueryスライダーを作ってみる！

どうもこんにちは。Toshikuraです。今回のtipsは【CSS3でアニメーション【番外編】- CSS3アニメーションで動作するjQueryスライダーを作ってみる！】です。全5回に分けてステップアップ式にCSS3アニメーションを取り上げてきましたが今回はその番外編です。これまでの全5回の記事とはうってかわり、jQueryをメインにCSS3アニメーションを動かしてみます。個人的にCSS3アニメーションで駆動するjQueryプラグインはあまり作らないのでメモ兼足がかりとして書いておきます。

• 【vol.1】- とりあえずはじめの一歩。
• 【vol.2】- ホバーでアニメーション実行 & 複数アニメーションの組み合わせ方法
• 【vol.3】- イージングを生成してくれる便利なジェネレーター
• 【vol.4】- クリックでアニメーションを実行させる方法（複数同時実行例含む）
• 【vol.5】- ちょっと複雑なアニメーションを作ってみる。
• 【vol.6】- CSS3アニメーションで動作するjQueryスライダーを作ってみる
• 【vol.7】- jQueryでCSS3アニメーションの終了のタイミングを取得する方法

CSS3アニメーションの実行

HTML

<div id="slider">
    <ul>
        <li>Slide1</li>
        <li>Slide2</li>
        <li>Slide3</li>
    </ul>
</div>
<p class="gotonext">NEXT</p>

まずはクリックでアニメーションを開始すると事からです。今回はスライダーを目標としますので【vol.4】とは異なった方法になります。スライダーの動作と言えば基本は横移動ですので特定のDIVを横へ横へCSS3アニメーションさせましょう。

JQ

$(function(){
    $(‘.gotonext’).click(function(){
        $(‘#slider’).css({
            ‘transform’:’translate3d(800px, 0px, 0px)’,
            ‘transition-duration’:’0.5s’
        });
    });
});




今までのjQueryアニメーションではここがmargin-leftやleftだったかと思いますがCSS3での横移動には【translate3d()】を使用します。CSS3アニメーションの3D変形プロパティをjQueryで指定しXYZ軸方向へアニメーションさせます。ここまでのサンプルはこちらからご確認ください。

CSS3アニメーションで動くスライダー

あとはjQueryでスライダーを作るのと同じ手順です。今回作成したものはCSS3アニメーションのみで動きますので該当プロパティが動作しないブラウザでは動きません。今度そこの部分を分岐させてぬるぬる動くスライダー系プラグインでも書こうかと思います。そういった意味ではCSS3を使ったプラグインへの土台としては便利ではないでしょうか（余分なとこ結構有るけど…）。解説はコメントアウトで追記していますので詳しくはそちらをご参照ください。

HTML

<div id="slider">
    <ul>
        <li>Slide1</li>
        <li>Slide2</li>
        <li>Slide3</li>
    </ul>
</div>
<p class="gotonext">NEXT</p>
<p class="gotoprev">PREV</p>
<ul id="pager">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

JQ

$(function(){

//アニメーションのスピード（1秒）
var speed = 1000;

//スライダーの対象
var tgt = $(‘#slider’);
var tgt_c = $(‘#slider’).children();
var tgt_cc = tgt_c.children();
var slideW = tgt.width();
var slideH = tgt.height();

//ここでスライダーの数を取得しています。
var slideNum = tgt_c.children().size();
var fx = -slideW;
var fx_abs = Math.abs(slideW);
var fx_fin = -slideW*(slideNum-1);

//初期設定です。スライダーからはみ出た部分をhiddenしたり、
//スライダーの中身を横並びにしています。
//ちなみに初期画面で左方向へ行った場合を考慮し、左端に右端の要素をクローンで追加しています。
tgt.css({‘overflow’:’hidden’});
tgt_c.css({‘width’:(100*(slideNum+1))+’%’,’height’:slideH});
tgt_c.css({‘transform’:’translate3d(‘+fx+’px, 0px, 0px)’});
tgt_cc.css({‘float’:’left’,’display’:’block’,’width’:(100/(slideNum+1))+’%’})
tgt_cc.last().clone().prependTo(tgt_c);

//ナビをクリックでtranslate3d()が動き出します。
$(‘.gotonext’).click(function(){
if(fx >= fx_fin){
fx = fx – fx_abs;
tgt_c.css({
‘transform’:’translate3d(‘+fx+’px, 0px, 0px)’,
‘transition-duration’:speed/1000+’s’
});
}else{
fx = -fx_abs;
tgt_c.css({
‘transform’:’translate3d(‘+fx+’px, 0px, 0px)’,
‘transition-duration’:speed/1000+’s’
});
}
});
$(‘.gotoprev’).click(function(){
if(fx <= -fx_abs){ fx = fx + fx_abs; tgt_c.css({ 'transform':'translate3d('+fx+'px, 0px, 0px)', 'transition-duration':speed/1000+'s' }); }else{ fx = fx_fin; tgt_c.css({ 'transform':'translate3d('+fx+'px, 0px, 0px)', 'transition-duration':speed/1000+'s' }); } }); //ページャー(サムネイル)機能をつけています。 //ページャーのリストのインデックス番号に応じてスライダー側がtransformします。 $('#pager').children().click(function(){ var index = $('#pager').children().index(this) + 1; tgt_c.css({ 'transform':'translate3d(-'+fx_abs*index+'px, 0px, 0px)', 'transition-duration':speed/1000+'s' }); }); }); [/js] ページング機能もつけてみたので地味に長くなってしまいました。ここまでのサンプルはこちらからご確認ください。使い回しの効く部分も多いと思いますので、もう少しダイエットして分岐をつければ使い物になるんではないでしょうか。これで当初の目的【CSS3アニメーションで動作するjQueryスライダー】は達成です。あとはゴニョゴニョしてプラグイン化等々遊んでみても面白いかもしれません。そういえば昔…スライダーの中にスライダーなんていう謎プラグインを作っていたので取り急ぎそこもCSS3アニメーション版に移行しようかな…（悩み中）。

以上になります。