[jQuery]BxSliderで画像をズームアウトさせながらスライドさせる

経緯

表題の動きをしようと思ったけど参考サイトのJS覗いたら処理が難しすぎてハァ?ってなったのでもっと簡単にできるだろ!!!と思って考えた結果。プラグインの機能の範囲で済ましてるし自分ではこっちのが良い。
※この記事はSlickでやろうとした結果挫折した記事の続きです。

要点

  • ズームアウトの動きは CSSのAnimation
  • movingクラスにズームアウトするアニメーションを呼び出し
  • BxSliderは普通に呼び出すだけ。難しいことしない。

CSS

スライド内のliに

0% → transform: scale(1.2)
100% → transform: scale(1)

という感じで最初が大きくもとに戻っていくCSSアニメーションを適用する。

親要素のoverflowはhiddenで。後は普通にスライドしたらOK。多分動く。