この記事ではSwiperのスライド画像への文字入れと文字アニメーションの付け方を紹介します。
画像に文字を入れる
下のCodePenは、Swiperのスライド画像に文字をいれた事例です。
See the Pen Swiper|画像に文字入れ by Satoru Shimizu (@sat-simizu) on CodePen.
HTML
HTMLの構造は、スライド画像用のimgタグの下にテキスト用のpタグを追加しただけになります。
Swiperに関係する箇所のHTML抜粋は下記のとおりです。
<body>
<!-- スライド -->
<div class="lp-slide">
<div class="lp-slide_wrapper">
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<!-- スライド1の画像 -->
<div class="slide-img_wrapper">
<img class="slide-img"
src="https://shimizu-create.com/wp-content/uploads/2023/10/slide_pic1.jpg" alt="スライド2">
<p class="text">Slide No.1<br>ダミーテキスト</p>
</div>
</div>
<div class="swiper-slide">
<!-- スライド2の画像 -->
<div class="slide-img_wrapper"><img class="slide-img"
src="https://shimizu-create.com/wp-content/uploads/2023/10/slide_pic2.jpg" alt="スライド2">
<p class="text">Slide No.2<br>ダミーテキスト</p>
</div>
</div>
<div class="swiper-slide">
<!-- スライド3の画像 -->
<div class="slide-img_wrapper"><img class="slide-img"
src="https://shimizu-create.com/wp-content/uploads/2023/10/slide_pic3.jpg" alt="スライド3">
<p class="text">Slide No.3<br>ダミーテキスト</p>
</div>
</div>
<div class="swiper-slide">
<!-- スライド4の画像 -->
<div class="slide-img_wrapper"><img class="slide-img"
src="https://shimizu-create.com/wp-content/uploads/2023/10/slide_pic4.jpg" alt="スライド4">
<p class="text">Slide No.4<br>ダミーテキスト</p>
</div>
</div>
</div>
<!-- swiperの左右のボタン -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<!-- swiperの画面下部のページネーションのポチポチ -->
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<!-- script -->
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
<!-- 自分のサイト用のJS -->
<script src="./script.js" defer></script>
</body>
Swiperにテキストを挿入する場合に、要点なる箇所のコードのみを抜粋したのが下のHTMLです。
構造的にはスライド画層のimgタグに対して、兄弟要素となるようにpタグでテキストを挿入しています。
<div class="swiper-slide">
<!-- スライド1のコンテンツ -->
<div class="slide-img_wrapper">
<!-- 画像用のimgタグ -->
<img class="slide-img"
<!-- テキスト用のpタグ -->
src="https://shimizu-create.com/wp-content/uploads/2023/10/slide_pic1.jpg" alt="スライド2">
<p class="text">Slide No.1<br>ダミーテキスト</p>
</div>
</div>
CSS
下のCSSコードが、Swiperスライド画像に文字を挿入する場合の記述例です。
@charset "UTF-8";
body {
font-family: "Noto Sans JP", "メイリオ", "Meiryo", "MS ゴシック",
"Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", sans-serif;
}
/* スライド */
.lp-slide {
margin: 0 auto;
max-width: 1280px;
width: 100%;
}
/* 画像のスタイル */
.slide-img {
width: 100%;
object-fit: contain;
position: relative;
}
/* 文字のスタイル */
.text {
color: #fff;
font-size: 6vw;
font-weight: 700;
text-shadow: 1px 1px 1px #333;
position: absolute;
top: 50%;
left: 20%;
transform: translate(-20%, -50%);
}
画像のみのSwiperとの違いは下記のとおりです。
- 画像用のimgタグ(CSSセレクター:slide-img)に対して「position: relative;」を設定
- テキスト用のpタグ(CSSセレクター:text)に対して、「position: absolute;」を設定し、top, left, transformなどで表示位置を決める
JavaScript
JavaScriptは画像のみの場合と同一です。
文字をフェードで入れる
Swiperのスライド画像に文字をフェードで表示させる場合は、CSSの@keyframes(キーフレーム)を利用します。
下のCodePenがSwiperに文字をフェードで表示させた事例になります。
See the Pen Swiper|文字フェードイン by Satoru Shimizu (@sat-simizu) on CodePen.
HTML
HTMLはテキスト表示のみ・テキストアニメーション無しの場合と全く同じです。特に変更した箇所はありません。
CSS
下のCSSコードが、テキストをフェードインアニメーションで表示させる記述例です。
@charset "UTF-8";
body {
font-family: "Noto Sans JP", "メイリオ", "Meiryo", "MS ゴシック",
"Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", sans-serif;
}
/* スライド */
.lp-slide {
margin: 0 auto;
max-width: 1280px;
width: 100%;
}
/* 画像のスタイル */
.slide-img {
width: 100%;
object-fit: contain;
position: relative;
}
/* 文字のスタイル */
.text {
color: #fff;
font-size: 6vw;
font-weight: 700;
text-shadow: 1px 1px 1px #333;
position: absolute;
top: 50%;
left: 20%;
transform: translate(-20%, -50%);
}
/* アニメーションのキーフレーム設定 */
@keyframes fade-text {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* テキストのアニメーション設定 */
.swiper-slide-active .text {
animation-name: fade-text;
animation-duration: 1s;
animation-delay: 1.5s;
animation-fill-mode: both;
}
アニメーションの設定は「@keyframes」で行っており、「opacity:0」から「opacity:1」にするだけの単純なアニメーションです。
テキストの具体的なアニメーション設定は、下記のとおりです。
- CSSセレクター:.swiper-slide-activeとテキスト用のpタグで指定します。例).swiper-slide-active .text
- なお、.swiper-slide-activeはアクティブなったSwiperスライドに付くクラス属性です。
- プロパティ「animation-name」:先の「@keyframes」で命名したアニメーション名を記入します。
- プロパティ「animation-duration」:「@keyframes」で設定したアニメーションが開始されてから終了するまでにかかる時間を秒単位で記入します。
- プロパティ「animation-delay」:「@keyframes」で設定したアニメーションが開始されるまでの待ち時間を秒単位で記入します。
JavaScript
JavaScriptは画像のみの場合と同一です。特に変更した箇所はありません。
文字を横からフェードでスライドインさせる
Swiperで文字を横からでフェードでスライドインさせたのが下のCodePenです。テキストフェードのCSSコードに2行追加で実装可能です。
See the Pen Swiper|テキスト横からスライドイン by Satoru Shimizu (@sat-simizu) on CodePen.
HTML
HTMLはテキスト表示のみ・テキストアニメーション無しの場合と全く同じです。特に変更した箇所はありません。
CSS
文字を横からフェードでスライドインさせるCSSは、基本的にはフェードインのみのテキストアニメーションと同じです。違う箇所のみを抜粋すると下記のようになります。
/* 文字のスタイル */
.text {
color: #fff;
font-size: 6vw;
font-weight: 700;
text-shadow: 1px 1px 1px #333;
position: absolute;
top: 30%;
left: 10%;
}
/* アニメーションのキーフレーム設定 */
@keyframes fade-text {
from {
opacity: 0;
transform: translateX(20px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
- テキスト用のpタグの設定:テキストフェードのみ場合は、transformプロパティも使って位置決めしてました。しかし、スライドインアニメを追加する場合はtransformプロパティを使うと表示が崩れるため使用していません。
- @keyframesの開始点の位置:transform: translateX(20px); →スライドさせたい距離をピクセル単位で記入
- @keyframesの終了点の位置:transform: translateX(0px); →元の位置に戻すというこで0pxを記入
一応、CSS全文も掲載しておきます。
@charset "UTF-8";
body {
font-family: "Noto Sans JP", "メイリオ", "Meiryo", "MS ゴシック",
"Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", sans-serif;
}
/* スライド */
.lp-slide {
margin: 0 auto;
max-width: 1280px;
width: 100%;
}
/* 画像のスタイル */
.slide-img {
width: 100%;
object-fit: contain;
position: relative;
}
/* 文字のスタイル */
.text {
color: #fff;
font-size: 6vw;
font-weight: 700;
text-shadow: 1px 1px 1px #333;
position: absolute;
top: 30%;
left: 10%;
}
/* アニメーションのキーフレーム設定 */
@keyframes fade-text {
from {
opacity: 0;
transform: translateX(20px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
/* テキストのアニメーション設定 */
.swiper-slide-active .text {
animation-name: fade-text;
animation-duration: 1s;
animation-delay: 1.5s;
animation-fill-mode: both;
}
JavaScriptに
JavaScriptは画像のみの場合と同一です。特に変更した箇所はありません。
文字を下からフェードでスライドインさせる
上で紹介したSwiperの横から文字スライドインの応用で、下から文字スライドインも簡単に作ることができます。下から文字をフェードでスライドインさせたSwiperを下のCodePenに載せておきます。
See the Pen Swiper |下からフェードでスライドイン by Satoru Shimizu (@sat-simizu) on CodePen.
横から文字スライドインと下から文字スライドインはどこが違うかと言うと、CSSの@keyframesの開始点と終了点のXをYに変えただけです。以下、関係箇所のCSS抜粋です。
/* アニメーションのキーフレーム設定 */
@keyframes fade-text {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0px);
}
}
関連記事
Swiperについては下記の記事でも詳細に紹介していますので、必要に応じてご参照願います。
Swiperの頻出パターンとカスタマイズ方法
Swiperのスライド拡大アニメーションの作り方
Swiperのスライドの上のレイヤーにボタンをオーバーレイ表示する方法
まとめ
以上、Swiperの文字のフェードアニメーションの紹介でした。