スライドインとフェードインを合わせてみるとどうなる？

今回は、前回、前々回でご紹介したスライドイン、フェードインを合わせてみたいと思います！

スライドインとフェードインを合わせると、例えばこのような表現が可能です。

スッと現れたり隠れたり…というのを繰り返させてみました。

合わせて使うことで、前回、前々回でご紹介したような、強調させる効果や余韻を残す効果が見込まれます。

ロゴや各セクションのタイトルなどの強調、ローディングアニメーション、他にもスライダーで他のスライドに移る際のアニメーションとしても使われ、活用の幅が広いです。

実際、どう使われている？

先ほどお見せしたような使い方以外では、このように用いられることもあります。

実際にはスクロール時にスライドインで要素が現れて、そのまま表示される、という見せ方が多いように思います。

どうでしょうか？様々な方向からスライドインすると、ただ並べるよりもグッと引き込まれませんか？

どうやって実装しているの？

シンプルな左から右への移動の場合のサンプルコードです。

/* HTML */
<div class="slidefadebox">
 <h5>TITLE</h5>
 <p>タイトル</p>
</div>

/* CSS */
.slidefadebox{
  display: inline-block;
  padding: 30px;
  margin: 30px 0;
  animation: left-slide-fade-in-out 5s ease 0s infinite normal forwards;
  background-color: #F9FAFB;
  color: #2E2B2B;
  font-size: 18px;
  opacity: 0;
  overflow: hidden;
}

.slidefadebox > h5{
  float: left;
}

.slidefadebox > p{
  float: left;
  padding-left: 15px;
  color: #b5ac91;
  font-size: 14px;
}
@keyframes left-slide-fade-in-out {
  0%{
    opacity: 0;
    transform: translateX(-300px);
  }

  50%{
    opacity: 1;
    transform: translateX(0);
  }

  100%{
    opacity: 0;
    transform: translateX(-300px);
  }
}

例では左から右への移動のみですが、translateXの値を正の値にしたり、translateXの代わりにtranslateYにしたりすると、上下左右の移動ができます。

まとめ

• スライドイン、フェードインを合わせて使うと、強調の効果や余韻を残す効果が生まれ、より魅力的な表現ができる

次回は、簡単なローディングアニメーションをご紹介します！