bxSliderはとても便利なスライダー系プラグインの一つです。
スライド後にアニメーションをすることができれば少しだけリッチに表現出来ます。
早速やっていきましょう。
アニメーションの仕組み
アニメーションには、CSSアニメーションを使っていきます。
スライド後に、CSSアニメーションが動き出すようにするためにbxSliderのコールバック関数を使ってアニメーション用のクラスを付与しましょう。
アニメーションの動き出す流れとしましては、こちらのようになります。
- スライドが表示される( スライドする )
- 出てきたスライドにクラスがつけられる
- つけられたクラスに書かれている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アニメーションを使っているので軽量かつ簡単に変更が可能です。ぜひ他の動きも試してみてください。ではまた次回の記事でお会いしましょう!