リンクをクリックしたらスクリーンを表示させてページを遷移する

リンクをクリックして他のページに遷移をするときにカーテンのようなスクリーンを表示させるリッチな演出を付けてみましょう。

ページ内リンクについてはCSSセレクタのnotを使って、「aのhrefに#を含まないものにaddClassでclassを追加する」という処理を行うのがコツです。

CONTENTS

サンプル
HTML
CSS
JavaScript

サンプル

サンプルを見てみましょう。

サンプルでは、Aのリンクをクリックするとページ遷移するときに下からブラックのスクリーンが表示されますが、Bをクリックしてもページ内遷移のためスクリーンは表示されません。

もういちど試すには右下にある「Rerun」をクリックしてください。

See the Pen
リンクをクリックしたらスクリーンを表示させてページを遷移する by イロイロデザインラボラトリ (@iroirodesignlab)
on CodePen.

HTML

まずはページ全体を覆うスクリーン部分を作ります。
HTMLはこんな感じです。

<div class="screen"></div>

THE シンプルですね。

このコードは<body>の直後に書いておきましょう。このHTMLにはあらかじめscreenというclassを付けていて、<a href=””>というリンクがクリックされたときにjQueryでscreen-activeというclassを追加します。

CSS

CSSはこんな感じです。

html {
  scroll-behavior: smooth;
}

.screen {
  position: fixed;
  top: 0;
  left: 0;
  background: #000000;
  min-width: 100%;
  min-height: 100%;
  z-index: 999;
  transform: translate(0, 100%);
  transition: all 0.5s cubic-bezier(0.79, -0.01, 0.29, 1);
}

.screen-active {
  transform: translate(0, 0);
}

html

htmlにあるscroll-behavior: smooth;は、ページ内リンクをスムーススクロールするためのプロパティです。スクリーンを表示させるのに関係ありませんので無視してもだいじょうぶです。

html {
  scroll-behavior: smooth;
}

.screen

position:fixed;で場所を固定してページ全体を覆うようにmin-width: 100%;、min-height: 100%;にしておき、transformのtraslateを使ってあらかじめページの外に出しておきます。

.screen {
  position: fixed; // 要素を固定させる
  top: 0;
  left: 0;
  background: #000000;
  min-width: 100%;
  min-height: 100%;
  z-index: 999;
  transform: translate(0, 100%); // ページの外に出す
  transition: all 0.5s cubic-bezier(0.79, -0.01, 0.29, 1); // アニメーションさせる
}

また、スクリーンが表示されるときのアニメーションはtransitionを使います。cubic-bezierを使ってニュアンスの動きにしておくとリッチになります。

.screen-active

.screen-activeはリンクがクリックされたときにjQueryのaddClassでclass=”screen”に付与されるclassです。

.screen-active {
  transform: translate(0, 0);
}

transform: translate(0, 100%);であらかじめページの外に出ていた要素にscreen-activeというclassを付けて、translateの位置を初期値まで戻します。

JavaScript

JavaScriptはjQueryを使います。まずはjQuery本体を読み込んで、その下に実行するためのコードを書きます。別途、script.jsなどのファイルを用意しておくと管理しやすくなるので、そっちのほうが良いかもしれません。

$("a:not([href^='#'])").on("click", function () {
  $(".screen").addClass("screen-active");

  event.preventDefault();
  var link = $(this).attr("href");
  setTimeout(function () {
    location.href = link;
  }, 500);
});

event.preventDefaultの部分は少しややこしく、リンクをクリック → ページ遷移させない → 500ミリ秒待つ → ページ遷移させるという動作にします。この「500ミリ秒待つ」という時間と、CSSのtransitionで指定した0.5sという時間を同じにすることで、スクリーンが表示されたらページ遷移するようにします。