bxSliderでスライド後にアニメーションさせる方法

bxSliderはとても便利なスライダー系プラグインの一つです。
スライド後にアニメーションをすることができれば少しだけリッチに表現出来ます。

早速やっていきましょう。

アニメーションの仕組み

アニメーションには、CSSアニメーションを使っていきます。
スライド後に、CSSアニメーションが動き出すようにするためにbxSliderのコールバック関数を使ってアニメーション用のクラスを付与しましょう。

アニメーションの動き出す流れとしましては、こちらのようになります。

1. スライドが表示される( スライドする )
2. 出てきたスライドにクラスがつけられる
3. つけられたクラスに書かれているCSSが適用される ← これがアニメーション

スライドをアニメーションさせるコードはこちら

cssアニメーションはこちらのコードです。
簡単にスケールするだけのもの

.-animScale{
	animation:4s scaleBg ease-out forwards;
}
@keyframes scaleBg {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.2);
    }
}

bxSliderの設定はこちら。
大事なのは、「onSliderLoad」と「onSlideAfter」の設定です。これでスライド時にクラスをつけることができます。

var bxSliderAnim = function(){
	// 初期設定とユーザーエージェントの取得
	var $slider = $('.js-slider'),
		userAgent = window.navigator.userAgent.toLowerCase(),
		activeClass = '-animScale',
		bxSliderConfig = {
			speed: 600,
			infiniteLoop: true,
			onSliderLoad: function() {
		        $slider.children('li').eq(1).addClass(activeClass);
		    },
		    onSlideAfter: function($slideElement, oldIndex, newIndex) {
		        $slider.children('li').removeClass(activeClass).eq(newIndex + 1).addClass(activeClass);
		    }
		}
	// Firefoxバージョン59でbxSlider内にaリンクがあるとリンクが機能しないバグを回避する設定
	if (userAgent.indexOf('firefox') != -1) {
		bxSliderConfig.touchEnabled = false;
	}
	$slider.bxSlider(bxSliderConfig);
}

まとめ

簡単ですね！
CSSアニメーションを使っているので軽量かつ簡単に変更が可能です。ぜひ他の動きも試してみてください。ではまた次回の記事でお会いしましょう！