Swiperのスライダーでスライドにテキストを表示することはあると思いますが、最初は非表示でスライドが表示されたらふわっと表示されるようにしたいと思います。
Swiperの基本的な使い方についてはこちらの記事を参照下さい。
【2024年最新Ver11】Swiperの使い方とよく使うオプション・カスタマイズ方法を解説
続きを見る
またSwiperには色々カスタマイズが出来るオプションがあるので、そちらも合わせて活用すると実装出来るスライダーの幅が広がります。
【Swiper】カスタマイズ用オプションまとめ一覧
続きを見る
- 完全無料
- 30日間でWeb制作を学べる
- 現役エンジニアへの質問無制限
- オンラインの動画学習なので時間場所を問わず勉強可能
- 最大4回の学習サポート面談
- 毎日人数制限ありの先着制
(有料になっていたらすいません🙇♂️)
Swiperでテキストがふわっとフェードインで表示されるスライダーの作り方
まずは基本となるスライダーを見てみます。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
テキストには特にフェードインのアニメーションは設定していません。
そしてこちらがフェードインを実装したスライダーです。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
それではコードの解説をしていきます。
コード解説
HTML、CSS、JavaScriptと順番に解説します。
HTML
HTMLは画像をimgタグではなく背景画像のbackground-image
にしています。
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image: url(画像パス1);">
<p>テキスト</p>
</div>
<div class="swiper-slide" style="background-image: url(画像パス2);">
<p>テキスト</p>
</div>
<div class="swiper-slide" style="background-image: url(画像パス3);">
<p>テキスト</p>
</div>
</div>
<!-- ページネーション -->
<div class="swiper-pagination"></div>
<!-- 前後の矢印 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
background-image
はCSSでもいいのですが、CodePenでCSSに書いたら画像が上手く表示されなかったので、HTMLに直書きしています。
CSS
そして重要なのがCSSになります。
/* スライダーのサイズ */
.swiper {
height: 66vw;
width: 100%;
}
/* スライドの背景画像のスタイル */
.swiper-slide {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* テキストのスタイル */
p {
color: #fff;
font-size: 4vw;
font-weight: 700;
left: 5%;
position: absolute;
text-shadow: 1px 1px 2px #333;
top: 50%;
width: 60%;
}
/* 表示されているスライドのテキスト */
.swiper-slide-active p {
animation-delay: 2s;
animation-duration: 2s;
animation-fill-mode: both;
animation-name: fadeIn;
}
/* アニメーション */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateX(100px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
『表示されているスライドのテキスト』と『アニメーション』がフェードインをさせるのに必要なコードです。
スライダー全体の高さは66vw
に設定していますが、ここを含めて数値はご自身の環境に合わせて調整して下さい。
@keyframes fadeIn
と animation-name: fadeIn;
のfadeIn
の名前は任意ですが、揃えるようにしましょう。
ちなみにtranslateX
はtranslateY
にすると横からではなく上下方向に動かせます。
JavaScript
JavaScriptは特に変わったところはありません。
const swiper = new Swiper(".swiper", {
loop: true, // ループさせる
speed: 2000, // 少しゆっくり(デフォルトは300)
autoplay: { // 自動再生
delay: 4000, // 4秒後に次のスライド
disableOnInteraction: false, // 矢印をクリックしても自動再生を止めない
},
// ページネーション
pagination: {
el: ".swiper-pagination",
clickable: true,
},
// 前後の矢印
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
注意点があるとすれば、speed
やdelay
の数値は自然になるように数値を決めましょう(CSSアニメーションの時間より短いと、フェードインが終わる前にスライドが切り替わってしまう)
まとめ:SwiperでテキストをフェードインさせるにはCSSアニメーションを使う
今回はSwiperでスライドに表示するテキストをふわっとフェードインで表示される方法を解説しました。
特にSwiperで設定することはなく、CSSのアニメーションだけで出来るので簡単に実装できると思います。
以上になります。
関連記事slick記事一覧
関連記事Swiper記事一覧
関連記事Splide記事一覧