swiperで文字も一緒にスライドさせる方法

今回はswiperと文字も一緒にスライドする方法をご紹介します。

まずはデモから。

See the Pen
Untitled by sayuri (@giraffeweb)
on CodePen.0

それではそれぞれのソースを紹介しますね。
HTMLは通常どおりです。figure部分はdivでもOK！

<section id="sectionGallery">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <figure>
          <img src="https://drive.google.com/uc?export=view&id=1zWiG_oZTQaj7YL6dMoL3emnCwEC6T3KK" alt="">
          <h2>Have a wonderful day.</h2>
          </figure>
      </div>
     ・・・
    </div>
  </div>
</section>

次にCSSです。CSSアニメーションを使用して文字をふわっと表示させています。


#sectionGallery {
  width: 60%;
  margin: auto;
  overflow: hidden;
  .swiper-container {
    .swiper-slide {
      figure {
        display: block;
        width: 100%;
        position: relative;
        h2 {
          position: absolute;
          font-size: 2vw;
          left: 0;
          text-align: center;
          top: 45%;
          z-index: 9999;
          display: block;
          width: 100%;
          opacity: 0;
          transform: perspective(100px) translateZ(10px);
          letter-spacing: 0.1em;
          position: absolute;
          left: 0;
          opacity: 0;
          transform: perspective(100px) translateZ(-10px);
          filter: blur(10px);
          letter-spacing: 0.2em;
        }
        img {
          width: 100%;
          display: block; 
        }
      }
    }
    .swiper-slide-active {
      figure {
        h2{
            opacity: 1;
            transform: perspective(100px) translateZ(0px);
            filter: blur(0px);
            letter-spacing: 0.15em;
            transition: opacity 2000ms linear, transform 2000ms linear, filter 600ms linear, letter-spacing 2000ms linear;
        }
      }
    }
  }
}

//ここから下は画像がアップになってフェードする処理
.swiper-slide-active,
.swiper-slide-duplicate-active,
.swiper-slide-prev{
  figure {
    animation: zoom 10s linear 0s 1 normal both;
  } 
}

@keyframes zoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15);
  }
}

最後にswiperのJSです。
フェードが嫌な方はデフォルの処理に変更してください。

let swipeOption = {
  loop: true,
  effect: 'fade',
  autoplay: {
    delay: 4000,
    disableOnInteraction: false,
  },
  speed: 2000,
}
new Swiper('.swiper-container', swipeOption);

以上でおわり！
簡単ですよね。みなさんもぜひ試してみてください。

Share: