以前の記事で、「SwiperとCSSを使用し、スライダーの背景画像をズームしながらふわっと切り替えする方法」を紹介しました。 SwiperとCSSを使用し、スライダーの背景画像をズームしながらふわっと切り替えする方法 今回は、画像をズームアップさせた際にスマホで確認すると、途中でズームアップされず、かくっとなる現象が起きたため、その解決方法を紹介します。 設定は簡単です。 アニメー

以前、SwiperとCSSを使用し、スライダーの背景画像をズームしながらふわっと切り替えする方法を書きましたが、Swiperのスライダーライブラリでフェードエフェクトを指定している場合、透過している画像を使用した際に下の画像と重なってしまう問題があります。今回は、それを解決するコードを紹介します。 方法は簡単です。下記オプションを追加するだけです。 fadeEffect: cross

今回は、JavaScriptライブラリ「Swiper」とCSSを使用し、背景画像をズームしながらふわっと切り替えるスライドショーを作成したいと思います。 まずは実装デモがこちら。 デモ内［Result］の［Run Pen］をクリックしてください。 See the Pen Untitled by 林 (@hayashi-akina) on CodePen.