デザイン道場について

こんにちは！Creative Designers Office Kの技術者Kです。

技術者Kのデザイン道場では、実際のホームページ制作で用いる効果やデザインを紹介していく予定です。

「こんな雰囲気のHPにしたいけれど、実際のHPがどんなHPになるか分からない…」、「今、HPを自作しているけれど、どうやったら魅力的なHPになるか分からない…」という方におすすめです！

スライドイン・スライドアウトってどんな効果？

今回のお題は、

「スライドイン・スライドアウト」です！

まず実際に動きを見てみましょう。少し下に注目してください。

左右に出たり入ったりしているのが分かるでしょうか？

このように、ある要素が表示される際にスライドして表示される効果がスライドインです。

スライドインはその逆、つまり、ある要素が隠れる際にスライドして隠れていく効果がスライドアウトです。

どんな時に使うの？

例えば、

• ヘッダーやサイドバーなどメニュー項目を収納しておくとき
• ローディングのアニメーションとして、ロゴなどを強調させたいとき

などの場面で用いられます。

特に、レスポンシブデザインではスマートフォン版のメニューを画面外に収納しておき、タップしたときにスライドイン・スライドアウトさせる…という風にメニューを実装することが度々あります。

また、トップ画面のローディングアニメーションとして、ロゴなどを強調させるときに用いられたりもします。

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

ホームページを自作してみたいと考えている人向けの話ですが、このように実装します。

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

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

.slidebox > h5{
  float: left;
}

.slidebox > p{
  float: left;
  padding-left: 15px;
  color: #b5ac91;
  font-size: 14px;
}

@keyframes slide-in-out {
  0%{
    transform: translateX(-500px);
  }

  50%{
    transform: translateX(0);
  }

  100%{
    transform: translateX(-500px);
  }
}

個々のプロパティの設定の解説は割愛しますが、ポイントはアニメーションとして、動かしたい方向への移動を設定することです。実際は、jQueryを用いて、クリックされたときにスライドインさせる…といった使い方が多いです。

まとめ

• スライドインは、ある要素が表示される際にスライドして表示される効果。
  スライドアウトは、ある要素が隠れる際にスライドして隠れていく効果。
• メニュー項目などをコンパクトに収納・表示したり、ロゴなどを強調したりする際に用いられる。

次回は、この効果と組み合わせて使うことの多い、フェードイン・フェードアウトの解説をします！