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

2023年10月12日2023年10月14日

この記事では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">
            <!-- スライド１の画像 -->
            <div class="slide-img_wrapper">
              <img class="slide-img"
              src="https://shimizu-create.com/wp-content/uploads/2023/10/slide_pic1.jpg" alt="スライド２">
              <p class="text">Slide No.1<br>ダミーテキスト</p>
            </div>
          </div>
          <div class="swiper-slide">
            <!-- スライド２の画像 -->
            <div class="slide-img_wrapper"><img class="slide-img"
                src="https://shimizu-create.com/wp-content/uploads/2023/10/slide_pic2.jpg" alt="スライド２">
                <p class="text">Slide No.2<br>ダミーテキスト</p>
            </div>
          </div>
          <div class="swiper-slide">
            <!-- スライド３の画像 -->
            <div class="slide-img_wrapper"><img class="slide-img"
                src="https://shimizu-create.com/wp-content/uploads/2023/10/slide_pic3.jpg" alt="スライド３">
                <p class="text">Slide No.3<br>ダミーテキスト</p>
            </div>
          </div>
          <div class="swiper-slide">
            <!-- スライド４の画像 -->
            <div class="slide-img_wrapper"><img class="slide-img"
                src="https://shimizu-create.com/wp-content/uploads/2023/10/slide_pic4.jpg" alt="スライド４">
                <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">
  <!-- スライド１のコンテンツ -->
  <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="スライド２">
    <p class="text">Slide No.1<br>ダミーテキスト</p>
  </div>
</div>

CSS

下のCSSコードが、Swiperスライド画像に文字を挿入する場合の記述例です。

@charset "UTF-8";
body {
  font-family: "Noto Sans JP", "メイリオ", "Meiryo", "ＭＳ ゴシック",
    "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", "ＭＳ ゴシック",
    "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コードに２行追加で実装可能です。

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", "ＭＳ ゴシック",
    "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の文字のフェードアニメーションの紹介でした。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

この記事を書いた人

SIM

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