平成最後の夏が終わりそうなので8月最後に記事を一つ投稿します。

ウェブサイトのメインビジュアル部分にスライドショーを実装するのは定番となりましたが、ただ単純に横スライドやフェードするだけでは差別化できません。他のサイトとは違う個性を出すため、スライド内の要素をもっとアニメーションさせましょう！今回は第２弾です。

前回の記事はこちらです。

前回はSwiperを使ったので、今回はslickを使ってスライド内でアニメーションさせます。どちらも似たような動きをしますが、slickはjQueryに依存します。

スライド内の要素をアニメーションさせるトリガーは、slickのClassである「slick-active」がスライドに付与されるタイミングです。

デモはこちら

サンプル01

スライドが現れたら拡大するアニメーション。奥行き感が出ます。

HTML

<div class="slide-class">
  <div class="animation-slide">
    <img src="https://dummyimage.com/600x400/c9c9c9/e5e5e5.gif" alt="" class="s-scale-img">
  </div>
  <div class="animation-slide">
    <img src="https://dummyimage.com/600x400/c9c9c9/e5e5e5.gif" alt="" class="s-scale-img">
  </div>
  <div class="animation-slide">
    <img src="https://dummyimage.com/600x400/c9c9c9/e5e5e5.gif" alt="" class="s-scale-img">
  </div>
</div>

CSS

.slick-slide .s-scale-img {
  transform: scale( .75 );
}

.slick-active .s-scale-img {
  animation: ScaleAni .5s ease .5s 1 normal both;
}
@keyframes ScaleAni {
  0% { transform: scale( .75 ); }
  100% { transform: scale( 1 ); }
}

トリガークラスが付与されたらCSSアニメーションが再生される仕組みです。なおJavaScriptでも同じようなことができます。

サンプル02

サンプル01にテキストを乗せたバージョンです。文字が出てくるタイミングを調整することで連続性を持たせることができます。

HTML

<div class="slide-class">
  <div class="animation-slide">
    <img src="https://dummyimage.com/600x400/c9c9c9/e5e5e5.gif" alt="" class="s-scale-img">
    <div class="s-fade-txt">Animation Text</div>
  </div>
  <div class="animation-slide">
    <img src="https://dummyimage.com/600x400/c9c9c9/e5e5e5.gif" alt="" class="s-scale-img">
    <div class="s-fade-txt">Animation Text</div>
  </div>
  <div class="animation-slide">
    <img src="https://dummyimage.com/600x400/c9c9c9/e5e5e5.gif" alt="" class="s-scale-img">
    <div class="s-fade-txt">Animation Text</div>
  </div>
</div>

CSS

.slick-slide .s-fade-txt {
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate( -50%, -50% );
  opacity: 0;
}

.slick-active .s-fade-txt {
  animation: FadeAni .5s ease 1s 1 normal both;
}
@keyframes FadeAni {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

サンプル03

サンプル02のテキストの動きとタイミングを調整したバージョンです。

HTML

<div class="slide-class">
  <div class="animation-slide">
    <img src="https://dummyimage.com/600x400/c9c9c9/e5e5e5.gif" alt="" class="s-scale-img">
    <div class="s-scale-txt">Animation Text</div>
  </div>
  <div class="animation-slide">
    <img src="https://dummyimage.com/600x400/c9c9c9/e5e5e5.gif" alt="" class="s-scale-img">
    <div class="s-scale-txt">Animation Text</div>
  </div>
  <div class="animation-slide">
    <img src="https://dummyimage.com/600x400/c9c9c9/e5e5e5.gif" alt="" class="s-scale-img">
    <div class="s-scale-txt">Animation Text</div>
  </div>
</div>

CSS

.slick-slide .s-scale-txt {
  font-weight: bold;
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate( 0, -50% );
  opacity: 0;
}

.slick-active .s-scale-txt {
  animation: SlideScaleAni 1s ease .25s 1 normal both;
}
@keyframes SlideScaleAni {
  0% { opacity: 0; transform: translateX( 100% ) scale( .75 ); }
  50% { opacity: 1; transform: translateX( 50% ) scale( .75 ); }
  100% { opacity: 1; transform: translateX( 50% ) scale( 1 ); }
}

サンプル04

Y軸も調整するとまた違った味がでます。

HTML

<div class="slide-class">
  <div class="animation-slide">
    <img src="https://dummyimage.com/600x400/c9c9c9/e5e5e5.gif" alt="" class="s-scale-img2">
    <div class="s-fade-txt">Animation Text</div>
  </div>
  <div class="animation-slide">
    <img src="https://dummyimage.com/600x400/c9c9c9/e5e5e5.gif" alt="" class="s-scale-img2">
    <div class="s-fade-txt">Animation Text</div>
  </div>
  <div class="animation-slide">
    <img src="https://dummyimage.com/600x400/c9c9c9/e5e5e5.gif" alt="" class="s-scale-img2">
    <div class="s-fade-txt">Animation Text</div>
  </div>
</div>

CSS

.slick-slide .s-scale-img2 {
  transform: translateY( 10% ) scale( .65 );
}

.slick-active .s-scale-img2 {
  animation: ScaleAni2 .5s ease .5s 1 normal both;
}
@keyframes ScaleAni2 {
  0% { transform: translateY( 10% ) scale( .65 ); }
  100% { transform: translateY( 0 ) scale( 1 ); }
}