【CSS】ファーストビューの要素をスライドインで表示する

こんにちは、Ryohei（@ityryohei）です！

ファーストビューの要素をスライドインアニメーションで表示する方法のご紹介です。

ページが表示されたときに何かしらの動きがあると、訪れた方はその部分に注目しますので、ファーストビューで強調したい要素がある場合に有効な方法となります。

本記事の内容

スライドインアニメーションの作り方
ファーストビューの要素をスライドインで表示する

では解説していきます。

スライドインアニメーションの作り方

スライドインアニメーションとは、要素が表示される際にスライド表示されるアニメーションを指します。

実装する方法はたくさんありますが、本記事ではCSSのみでアニメーションをご紹介できればと思います。

CSSで実装する場合はkeyframesとanimationを使用します。詳しくは下記の記事にてご紹介していますので、ご覧いただければと思います。

@keyframesとanimationの使い方

下記はスライドインアニメーションを表示する際のHTMLとCSSの記述例です。例では、h1の要素が右から左へスライドイン表示されます。

HTML

<div>
  <h1 class="slideInRight">Into the Program</h1>
</div>

CSS

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(150px);
  }
  
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slideInRight {
  animation-name: slideInRight;
  animation-duration: 1s;
  animation-timing-function: ease;
}

アニメーションの方向を変更したい場合は、keyframesのfromで設定しているtranslateX(150px)を負の値にすると左から右へ、translateXをtranslateYに変更すると上と下からスライドインするアニメーションに変更することができますので、お試しいただければと思います。

ファーストビューの要素をスライドインで表示する

ファーストビューの要素をスライドインアニメーションで表示します。HTMLとCSSは上記でご紹介した内容と同じものとなります。

補足としまして、スライドインする要素はX軸が移動するため、画面幅を超えると横スクロールバーが表示されます。スライドインする要素の親にoverflowのhiddenを指定して、スクロールバーが表示されないようにしましょう。

HTML

<div id="keyvisual">
  <h1 class="slideInRight">Into the Program</h1>
</div>

CSS

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(150px);
  }
  
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slideInRight {
  animation-name: slideInRight;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}

#keyvisual {
  overflow: hidden
}