ブログ

トップページ > ブログ記事一覧 > [jQuery]BxSliderで画像をズームアウトさせながらスライドさせる

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

  • 投稿日:2018/08/10
  • 最終更新:2019/02/05
この記事は 2018年8月10日 に投稿されました。
内容が古いかもしれません。ご注意ください。
※最後に更新されたのは 2019年2月5日 です。

経緯

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

要点

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

CSS

スライド内のliに

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

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

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