Webアプリで画面遷移をさせることなく、ネイティブアプリのように画面切り替えをしたいと思ったので、実験的に作ってみました。

中央のボタンを押すと別の画面が下からズズッと出てきます。

See the Pen 画面いっぱいのスクリーンがスライドインするサンプル by Makoto Ohnami (@zohnami) on CodePen.

とりあえず、HTMLはこのようにcover_screenとして上から被せる画面を置いておきます。

このままだと、containerの中にcover_screenが入ってしまうのでcssを調整しましょう。

<div class="container">
  <div class="button slide_up_button">
    common!!
  </div>
  <div class="cover_screen">
    <div class="button slide_down_button">
      close!!
    </div>
  </div>
</div>

ポイントはposition: absolute;とtop:100%;の部分です。 positionをabsoluteとすることで位置を絶対指定にし、topを画面の100%だけずらすことでスクリーンがブラウザ画面の真下に潜んでいる状態にしておきます。

.cover_screen {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #f6ad49;
  width: 100%;
  height: 100vh;
  display: grid;
  place-content: center;
}

あとはアニメーションのcssを作っておきます。

以下のようにアニメーションの進捗に応じてtopの状態をゼロに近づけていきます。

今回は0%と100%だけを指定していますが、途中の状態を細かく指定すると動きに緩急をつけたりできると思います。

@keyframes slide_up {
  0% {
    top: 100%;
  }

  100% {
    top: 0;
  }
}

.animation_slide_up {
  animation-name: slide_up;
  animation-duration: 0.6s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

あとは、ボタンのクリックに応じてcssのアニメーションクラスを追加したり削除したりするコードをJavaScriptとして書いていきます。

開閉を繰り返すと、不要なクラスが残ってしまうのでremoveで取り除くこともやっています。

const slideUpButton = document.querySelector('.slide_up_button')
slideUpButton.addEventListener('click', () => {
  const coverScreen = document.querySelector('.cover_screen')
  coverScreen.classList.remove('animation_slide_down')  
  coverScreen.classList.add('animation_slide_up')  
})

コードの全体像はCodePenのサンプルをご覧ください。

SPAのようなことをしたくて、こんな感じの演出が必要になりました。

完成したらこのブログでもお知らせしようと思います。

この記事の環境情報

  • HTML, CSS, JavaScript
  • つま先を大事に