【Splide】テキストがふわっとフェードインで表示されるスライダーの作り方

Splideでスライドが表示された時にテキストをふわっと表示させること出来る？

Splideのスライダーでスライドにテキストを表示することはあると思いますが、最初は非表示でスライドが表示されたらふわっと表示されるようにしたいと思います。

Splideの基本的な使い方についてはこちらの記事を参照下さい。

Splideでテキストがふわっとフェードインで表示されるスライダーの作り方

まずは基本となるスライダーを見てみます。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

テキストには特にフェードインのアニメーションは設定していません。

そしてこちらがフェードインを実装したスライダーです。

See the Pen
Splide：テキストフェードイン by junpei (@junpei-sugiyama)
on CodePen.

それではコードの解説をしていきます。

コード解説

HTML、CSS、JavaScriptと順番に解説します。

HTML

まずHTMLはこちらです。

<div class="splide" role="group" aria-label="テキストフェードイン">
  <div class="splide__track">
    <div class="splide__list">
      <div class="splide__slide" style="background-image: url(画像パス1)">
        <p>テキスト</p>
      </div>
      <div class="splide__slide" style="background-image: url(画像パス2)">
        <p>テキスト</p>
      </div>
      <div class="splide__slide" style="background-image: url(画像パス3)">
        <p>テキスト</p>
      </div>
    </div>
  </div>
</div>

background-imageはCSSでも大丈夫ですが、CSSをすっきりさせるために今回はHTMLに直書きしています。

CSS

そして重要なのがCSSになります。

/* スライダーのサイズ */
.splide__track {
  height: 66vw;
  width: 100%;
}
/* スライドの背景画像のスタイル */
.splide__slide {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
/* テキストのスタイル */
p {
  color: #fff;
  font-size: 4vw;
  font-weight: 700;
  left: 5%;
  position: absolute;
  text-shadow: 1px 1px 2px #333;
  top: 50%;
  width: 60%;
}
/* 表示されているスライドのテキスト */
.splide__slide.is-active p {
  animation-delay: 2s;
  animation-duration: 2s;
  animation-fill-mode: both;
  animation-name: fadeIn;
}
/* アニメーション */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

『表示されているスライドのテキスト』と『アニメーション』がフェードインをさせるのに必要なコードです。

スライダー全体の高さは66vwに設定していますが、ここを含めて数値はご自身の環境に合わせて調整して下さい。

@keyframes fadeInと animation-name: fadeIn;のfadeInの名前は任意ですが、揃えるようにしましょう。

ちなみにtranslateXはtranslateYにすると横からではなく上下方向に動かせます。

JavaScript

そしてJavaScriptはこちらです。

const splide = new Splide(".splide", {
  autoplay: true, // 自動再生
  type: "loop", // ループ
  pauseOnHover: false, // カーソルが乗ってもスクロールを停止させない
  pauseOnFocus: false, // 矢印をクリックしてもスクロールを停止させない
  interval: 4000, // 自動再生の間隔
  speed: 2000, // スライダーの移動時間
  updateOnMove: true, // is-activeクラスを移動前に更新する
}).mount();

注意点は2つあります。

まずspeedやintervalの数値は自然になるように数値を決めましょう（CSSアニメーションの時間より短いと、フェードインが終わる前にスライドが切り替わってしまう）

あとはupdateOnMove: trueを書かないと、スライドが変わる前にテキストのフェードインが始まってしまいます。