【Swiper】画像に文字アニメーションを入れる方法【CSSのみ】

Swiper文字アニメーションのサムネイル

この記事では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】設定・使い方とオプション・カスタマイズの方法【JavaScript】 Swiperの実案件で頻出パターンを紹介します。基本設定・使い方とオプション・カスタマイズの方法についてCodePenを使いながら、html, CSS, JavaScriptの書き方を解説。fade, 矢印ボタンやページネーションの色・サイズ・形状変更と外に出すなどの表示位置の変更、ページ内に複数のSwiperを設置する場合のコードの書き方を初心者向けに解説します。

Swiperのスライド拡大アニメーションの作り方

あわせて読みたい
【Swiper】スライドが拡大するアニメーション【CSS追加のみで実装】 既存のSwiperスライドにCSSを追加するだけで拡大アニメーションを実装する方法を紹介します。なお、追加するCSSは完全にコピペのみでアニメーションが実装できます。 見...

Swiperのスライドの上のレイヤーにボタンをオーバーレイ表示する方法

まとめ

 以上、Swiperの文字のフェードアニメーションの紹介でした。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

■清水WEB制作代表
■コーディング:WordPress(オリジナルテーマ制作等)・HTML・Sass・FLOCSS・JavaScript(jQuery)等
■集客力:YouTube/Instagram/ブログでそれぞれ登録者数16000人/フォロワー13000人/月間最大アクセス50000PVの集客実績があります
■文章作成:博士号所有、会社員時代は科学雑誌に寄稿していたので文章作成も得意です
■写真技術:Amazon Kindle出版で、写真集・撮影編集解説書を5冊好評発売中です

目次