expexp.jp

【CSS】スライド上のテキストやボタンをアニメーションさせたい

CSS , JavaScript

ホームや商品紹介ページなどで多く使われるスライドショー。単純に画像をスライドさせるだけでは面白くないという方におすすめな小技を紹介します。

今回紹介するスライダーのプラグインはSwiperを使用しています。レスポンシブ対応で人気のslickでも同じことができますが、同じくレスポンシブ対応でjQueryが不要なSwiperを採用しました。

動作サンプルページ

実際のアニメーションサンプルはこちら。

サンプル01

スライド上にテキストがフェードインで現れます。

HTML・CSS

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="s-fade-wrap">
        <img src="img/img-640x480.gif">
        <span class="s-fade-text">slide 1</span>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="s-fade-wrap">
        <img src="img/img-640x480.gif">
        <span class="s-fade-text">slide 2</span>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="s-fade-wrap">
        <img src="img/img-640x480.gif">
        <span class="s-fade-text">slide 3</span>
      </div>
    </div>
  </div>

  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>
.swiper-container {
  padding: 30px 0 50px;
  background: #eeeeee;
}

.s-fade-wrap {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
}

.s-fade-text {
  position: absolute;
  top: 20%;
  left: 0;
  width: 100%;
  text-align: center;
  color: white;
  font-size: 5vw;
}

.swiper-slide-active .s-fade-text {
  animation: slideTextFade 1.75s ease 0s 1 normal;
}

@keyframes slideTextFade {
  0%, 25% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

デモはこちら。

サンプル02

テキストが右から移動しながらフェードインで現れます。

HTML・CSS

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="s-right-wrap">
        <img src="img/img-640x480.gif">
        <span class="s-right-text">slide 1</span>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="s-right-wrap">
        <img src="img/img-640x480.gif">
        <span class="s-right-text">slide 2</span>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="s-right-wrap">
        <img src="img/img-640x480.gif">
        <span class="s-right-text">slide 3</span>
      </div>
    </div>
  </div>

  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>
.swiper-container {
  padding: 30px 0 50px;
  background: #eeeeee;
}

.s-right-wrap {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
}

.s-right-text {
  position: absolute;
  top: 20%;
  left: 0;
  width: 100%;
  text-align: center;
  color: white;
  font-size: 5vw;
}

.swiper-slide-active .s-right-text {
  animation: slideFromRight 1.5s ease 0s 1 normal;
}

@keyframes slideFromRight {
  0%, 25% {
    transform: translateX(50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

デモはこちら。

サンプル03

2種類のテキストがフェードインで現れます。

HTML・CSS

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="s-right2-wrap">
        <img src="img/img-640x480.gif">
        <span class="s-right2-text">slide 1</span>
        <span class="s-right2-sub">sub text 1.</span>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="s-right2-wrap">
        <img src="img/img-640x480.gif">
        <span class="s-right2-text">slide 2</span>
        <span class="s-right2-sub">sub text 2.</span>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="s-right2-wrap">
        <img src="img/img-640x480.gif">
        <span class="s-right2-text">slide 3</span>
        <span class="s-right2-sub">sub text 3.</span>
      </div>
    </div>
  </div>

  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>
.swiper-container {
  padding: 30px 0 50px;
  background: #eeeeee;
}

.s-right2-wrap {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
}

.s-right2-text,
.s-right2-sub {
  position: absolute;
  width: 100%;
  left: 0;
  text-align: center;
  color: white;
}

.s-right2-text {
  top: 20%;
  font-size: 5vw;
}

.s-right2-sub {
  top: 55%;
  font-size: 2vw;
}

.swiper-slide-active .s-right2-text {
  animation: slideFromRight 1.5s ease 0s 1 normal;
}

.swiper-slide-active .s-right2-sub {
  animation: slideFromRightSub 2.0s ease 0s 1 normal;
}

@keyframes slideFromRightSub {
  0%, 45% {
    transform: translateX(50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

デモはこちら。

サンプル04

2種類のテキストとボタンがフェードインで現れます。

HTML・CSS

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="s-three-wrap">
        <img src="img/img-640x480.gif">
        <span class="s-three-text">slide 1</span>
        <span class="s-three-sub">sub text 1.</span>
        <a href="" class="s-three-button">button 1</a>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="s-three-wrap">
        <img src="img/img-640x480.gif">
        <span class="s-three-text">slide 2</span>
        <span class="s-three-sub">sub text 2.</span>
        <a href="" class="s-three-button">button 2</a>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="s-three-wrap">
        <img src="img/img-640x480.gif">
        <span class="s-three-text">slide 3</span>
        <span class="s-three-sub">sub text 3.</span>
        <a href="" class="s-three-button">button 3</a>
      </div>
    </div>
  </div>

  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>
.swiper-container {
  padding: 30px 0 50px;
  background: #eeeeee;
}

.s-three-wrap {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
}

.s-three-text,
.s-three-sub,
.s-three-button {
  position: absolute;
  width: 100%;
  left: 0;
  text-align: center;
  color: white;
}

.s-three-text {
  top: 20%;
  font-size: 5vw;
}

.s-three-sub {
  top: 55%;
  font-size: 2vw;
}

.s-three-button {
  top: 75%;
  left: calc( 50% - 75px );
  display: block;
  width: 150px;
  padding: 5px 10px;
  box-sizing: border-box;
  background: #535353;
  color: white;
  text-align: center;
  text-decoration: none;
  transition: all .25s ease;
}
.s-three-button:hover {
  background: white;
  color: #1b1b1b;
}

.swiper-slide-active .s-three-text {
  animation: slideFromRight 1.5s ease 0s 1 normal;
}
.swiper-slide-active .s-three-sub {
  animation: slideFromRightSub 2.0s ease 0s 1 normal;
}
.swiper-slide-active .s-three-button {
  animation: slideFromRightBtn 2.5s ease 0s 1 normal;
}

@keyframes slideFromRightBtn {
  0%, 65% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

デモはこちら。

サンプル05

2種類のテキストと、ボタンではなくコメントボックスが現れます。

HTML・CSS

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="s-four-wrap">
        <img src="img/img-640x480.gif">
        <span class="s-four-text">slide 1</span>
        <span class="s-four-sub">sub text 1.</span>
        <div class="s-four-box">comment box 1</div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="s-four-wrap">
        <img src="img/img-640x480.gif">
        <span class="s-four-text">slide 2</span>
        <span class="s-four-sub">sub text 2.</span>
        <div class="s-four-box">comment box 2</div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="s-four-wrap">
        <img src="img/img-640x480.gif">
        <span class="s-four-text">slide 3</span>
        <span class="s-four-sub">sub text 3.</span>
        <div class="s-four-box">comment box 3</div>
      </div>
    </div>
  </div>

  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>
.swiper-container {
  padding: 30px 0 50px;
  background: #eeeeee;
}

.s-four-wrap {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  overflow: hidden;
}

.s-four-text,
.s-four-sub,
.s-four-box {
  position: absolute;
  width: 100%;
  left: 0;
  text-align: center;
  color: white;
}

.s-four-text {
  top: 20%;
  font-size: 5vw;
}

.s-four-sub {
  top: 55%;
  font-size: 2vw;
}

.s-four-box {
  bottom: 0;
  height: 20%;
  padding: 10px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.75);
  text-align: left;
}

.swiper-slide-active .s-four-text {
  animation: slideFromRight 1.5s ease 0s 1 normal;
}
.swiper-slide-active .s-four-sub {
  animation: slideFromRightSub 2.0s ease 0s 1 normal;
}
.swiper-slide-active .s-four-box {
  animation: slideFromRightBox 2.5s ease 0s 1 normal;
}

@keyframes slideFromRightBox {
  0%, 65% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0px);
  }
}

デモはこちら。

Comments

  1. 名無し より:
    2018年9月1日 3:13 PM

    こん●●は！
    有難く参考にさせて頂きました。m(_ _)m
    ところで[class=”s-img”］って何の目的があるのでしょうか？

    返信
    • webmaster より:
      2018年9月3日 11:06 AM

      こんにちは。

      すみません。
      class=”s-img”は何かアニメーションさせようと思って忘れてたクラスです。
      混乱を招くので記事から削除しました。

      返信
  2. 小林隆 より:
    2021年4月6日 10:48 AM

    初めまして。
    サンプルのご紹介ありがとうございます。
    １つお聞きしたいのですが、画像のスライドはオートとループにはできないのでしょうか？

    返信
  3. JS系 – Unity service Online Manual より:
    2022年9月20日 5:26 PM

    […] ２重のタブ切り替えを実装するコード【Swiper.js】ライドのタイミングで文字が浮かび上がるスライド上のテキストやボタンをアニメーションさせたい […]

    返信

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

*

関連記事