フリーランス｜WEB 制作経験丸7年、制作会社様からのご依頼に丁寧・高クオリティでお手伝いいたします。 I R O D O R I D ESIGN
【Swiper】マスク効果で切り替えるアニメーションの実装方法 RELEASE / 2025.4.14 UPDATE / 2025.04.14 CSSアニメーション JavaScript Swiper スライダー マスクアニメーション マスク効果Swiperは簡単にスライダーを実装できる人気のプラグインです。フェードでの切り替えやカルーセルなどデフォルトで多くの切り替えアニメーションに対応していますが、マスク効果で切り替えるアニメーションは用意されていません。Swiperを使いつつ、マスク効果で切り替えるには切り替えアニメーション部分を自分で作成する必要があります。この記事ではSwiperを使ってマスク効果で切り替えるスライダーアニメーションの実装方法をご紹介したいと思います。
この記事の目次を表示
- 1 完成サンプル
- 2 解説
- 3 まとめ
完成サンプル
まずは完成サンプルから。
HTMLはこちら。
<div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="#"></div> <div class="swiper-slide"><img src="#"></div> <div class="swiper-slide"><img src="#"></div> </div> </div>続いて、CSSはこちら。
*{ margin: 0; padding: 0; } .swiper-slide{ width: 500px; height: 100vh; } .swiper-slide img{ width: 100%; height: 100%; object-fit: cover; transition: clip-path .3s ease-in-out; } .swiper-slide.swiper-slide-next img{ clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); } .swiper-slide.swiper-slide-active img{ clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }最後にScriptはこちら。
const swiper = new Swiper('.swiper', { effect: 'fade', speed: 1, loop: true, autoplay: { delay: 5000, }, });実装サンプルはこちら。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
解説
HTMLはごく普通のSwiperを実装するための最小要素で構成されています。一番上部の要素にclass=”swiper”、次の要素にclass=”swiper-wrapper”、それぞれのスライド要素にclass=”swiper-slide”のそれぞれのクラスを設定しています。
<div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="#"></div> <div class="swiper-slide"><img src="#"></div> <div class="swiper-slide"><img src="#"></div> </div> </div>続いて、Swiperのコード部分。
const swiper = new Swiper('.swiper', { effect: 'fade', speed: 1, loop: true, autoplay: { delay: 5000, }, });Swiperの設定もすごくシンプルな構成となっています。
Swiperのオプション指定の中で重要になるのが、speedを1にすること。
speed: 1,Swiperでマスク効果で切り替えるアニメーションは用意されていないので、アニメーション部分はCSSで実装します。そのため、Swiper自体の切り替えは一瞬で完了するようにspeedは1にしておきます。
そして、最後にSwiperでマスク切り替えを実現するための最も重要となるCSSの指定。
切り替えはCSSのclip-pathを使用します。
.swiper-slide img{ transition: clip-path .3s ease-in-out; }imgタグにclip-pathの値を0.3秒かけて切り替えるようCSSアニメーションを設定します。
そして、swiperで次に表示されるコンテンツにはclass=”swiper-slide-next”が設定される特徴を利用し、このクラスに以下のCSSが指定されるようにします。
.swiper-slide.swiper-slide-next img{ clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); }この指定のおかげで、次に表示されるコンテンツは横幅が0になるため、非表示状態になります。
そして、swiperでアクティブ要素にはclass=”swiper-slide-active”が設定されるので、このクラスには以下のCSSが指定されるようにします。
.swiper-slide.swiper-slide-active img{ clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }これにより、次のコンテンツがアクティブ要素になるタイミングで、0.3秒かけて、幅が100%の状態になるため、マスクアニメーションによる切り替えが実現出来ます。
まとめ
いかがでしたか？Swiperのデフォルト切り替えに無い切り替えアニメーションは、CSSアニメーションを使うことで簡単に実装する事ができます。
最後にもう一度完成コードをご紹介します。ぜひ、コピペして使用してみてください。
HTMLはこちら。
<div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="#"></div> <div class="swiper-slide"><img src="#"></div> <div class="swiper-slide"><img src="#"></div> </div> </div>続いて、CSSはこちら。
*{ margin: 0; padding: 0; } .swiper-slide{ width: 500px; height: 100vh; } .swiper-slide img{ width: 100%; height: 100%; object-fit: cover; transition: clip-path .3s ease-in-out; } .swiper-slide.swiper-slide-next img{ clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); } .swiper-slide.swiper-slide-active img{ clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }最後にScriptはこちら。
const swiper = new Swiper('.swiper', { effect: 'fade', speed: 1, loop: true, autoplay: { delay: 5000, }, });実装サンプルはこちら。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
関連記事一覧
【初心者向け】Swiperの基本的な使い方WEBサイト制作で欠かすことの出来ないスライドショー。その中でも人気のある「Swiper」。簡単にスライドショーを作るこ […]
【コピペ】CSSのclip-pathで色んな図形に切り抜く／サンプルコードCSSのclip-pathプロパティを使うことで要素の表示範囲を定義するために使用されます。要素の可視部分を特定の形状に […]
【Swiper】サムネイルと連動したスライダーを実装する方法Swiperは簡単にスライダーを作ることが出来るプラグインです。オプションが豊富に用意されていて設定次第で様々な形のスラ […]
【Swiper】横に一定速度で流れ続ける無限ループスライダーの作り方WEBサイトを見ていると横方向に一定速度で流れ続けるスライダーを見たことはありませんか？一見難しそうなスライダーですがス […]
【Swiper】ページネーションや左右の矢印をスライダーの外に出す方法Swiperは簡単にスライダーを作ることが出来る人気プラグイン。そんなSwiperでページネーションや左右の矢印を追加し […]
【Swiper】カルーセルスライダーを実装する方法Swiperは簡単にスライダーを作成することが出来るプラグインです。この記事ではSwiperを使ってカルーセルスライダー […]
【Contact Form 7】出力されるHTMLタグ構造のまとめWordPressでお問い合わせフォームを作成する際に使用する人気プラグインの「Contact Form 7」。このプラ […]
【CSS】斜めの背景やリンクを設定する方法デザイナーがちょっとした遊び心で斜めのコンテンツを作ったとします。それをコーダーがHTMLとCSSで実現するには少し工夫 […]
【コピペOK】画像にホバーした時のCSSアニメーション20選Webサイトにはブログのサムネイル画像等、画像にリンク設定することがよくありますね。デザイナーからホバーアニメーションが […]
【コピペOK】ボタンにホバーした時のCSSアニメーション15選ボタンにホバーした時のアニメーションがいつも同じになっているコーダーも多いのではないでしょうか。デザイナーからホバーした […]
【Swiper】slideToメソッドがズレる原因と解決方法WEBサイト制作で頻出するスライダー。そのスライダーを簡単に作ることが出来る人気の「Swiper」。多くのオプションやメ […]
【JavaScript】iframeで埋め込んだYouTube動画を操作する方法iframeで埋め込んだYouTube動画はJavScriptやjQueryを使うことで再生、停止など操作することが可能 […]