CSSで実装するオーバーレイ表示時のエフェクトサンプル 10

初期表示では非表示になっているナビ表示時やモーダル表示時の背景などで利用されるオーバーレイを表示する際のエフェクトサンプルを自分用にほしくて作ったのでシェアします。
すべてCSSを使って実装しているので、カラーや透過率などのデザイン的な部分はもちろん、表示されるスピードやタイミングについてもCSSで調整可能です。
また、全体的にシンプルで使いやすいもの中心なのでそのまま利用するだけでなく、いずれかをベースにさらに手を加えてユニークなエフェクトにしたりもできると思います。

紹介しているのは基本的にオーバーレイ要素として下記HTMLのようなdiv要素をひとつ用意し、それに対してCSSでエフェクトを付けたものになります。
複数の疑似要素を組み合わせているものは無理だと思いますが、簡易的なエフェクトによっては例えばbody要素の疑似要素をdiv要素の代用にした形に書き換えれば実装できると思います。

<div class="overlay"></div>

CSSについてはプレフィックスを省略しているので必要であれば追記してください。
オーバーレイのサイズについてはwidthとheightにそれぞれ100%指定をしていますが、100vwや100vhなどを使う形にでも大きな問題なく実装できると思います。
また、以下で紹介しているコードはオーバーレイが表示されたときに.is-openというclassが付与される想定でスタイル指定をしているので、class名を変更したい場合はサンプルコードでそれぞれ.is-openとなっている箇所を任意で変更してください。
class付与の方法についてはJavaScriptを用いる（例えばjQueryなら特定の要素クリック時に$('.overlay').addClass('is-open');を実行）などして実装してください。

ここでは実装するためのコードのみ紹介しているので、実際の表示を以下デモで確認しつつ気になるエフェクトがあれば簡単な説明やコードをこのエントリー内で確認してみてください。

Demo: CSS Overlay Effects

フェードイン

シンプルにフェードイン表示させる方法で、実装にはCSSを下記のように記述します。

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .7);
  opacity: 0;
  visibility: hidden;
  transition: .3s linear;
}
.overlay.is-open {
  opacity: 1;
  visibility: visible;
}

中央から全体に広がる #1

中央からフェードインしつつページ全体に広がるようなエフェクトで、実装にはCSSを下記のように記述します。

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .7);
  opacity: 0;
  visibility: hidden;
  transition: .3s linear;
  transform: scale(.2);
}
.overlay.is-open {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

また、.overlayにデフォルトの指定としてtransform-originを組み合わせると任意の方向から表示させることができ、例えばtransform-origin: left top;を追記すればウィンドウの左上から、transform-origin: bottom;を追記すればウィンドウの中央下部から広がるような見せ方にそれぞれできます。

他にもtransform: rotate()を使うこと（例えばデフォルトでrotate(360deg)を指定し、オープン時にrotate(0)にするなど）で、回転しながら表示されるエフェクトにすることもできます。

中央から全体に広がる #2

先ほどはオーバーレイが上下左右の全方向に向かって大きくなる感じのものでしたが、こちらは中央から上下に向かって広がるタイプのものです。
実装にはCSSを下記のように記述します。

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .7);
  opacity: 0;
  visibility: hidden;
  transition: .3s linear;
  transform: scaleY(0);
}
.overlay.is-open {
  opacity: 1;
  visibility: visible;
  transform: scaleY(1);
}

上下でなく左右に向かって大きくする感じにしたければ、上記サンプルコードでtransform: scaleY()となっている箇所をそれぞれtransform: scaleX()に変更すれば実装できます。

上から下へ

上からオーバーレイが降りてくるようなエフェクトで、実装にはCSSを下記のように記述します。

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .7);
  opacity: 0;
  visibility: hidden;
  transition: .3s linear;
  transform: translateY(-100%);
}
.overlay.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

下から上に向かって表示される感じにしたい場合は、デフォルトでtransform: translateY(-100%);としている部分をtransform: translateY(100%);に変更してあげれば実装できます。

また、このサンプルの場合はフェードインのエフェクトも加えていますが、それぞれopacityとvisibilityを削除すれば、フェードインのエフェクトなしで上から降りてくる形で実装できます。

左から右へ

上のコードの一部を変更することで左から右に向かってオーバーレイが表示される形も実装できます。
実装にはCSSを下記のように記述します。

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .7);
  opacity: 0;
  visibility: hidden;
  transition: .3s linear;
  transform: translateX(-100%);
}
.overlay.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

右から左に向かって表示される感じにしたい場合は、デフォルトでtransform: translateX(-100%);としている部分をtransform: translateX(100%);に変更してあげれば実装できます。

オープン時は上から、クローズ時は下へ

こちらは先ほど紹介したようにオープン時は上からオーバーレイが表示されますが、クローズ時に上に戻るのではなく下に向かって閉じていく形にしたものです。
こちらの実装はanimationを組み合わせており、実装にはCSSを下記のように記述します。

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .7);
  opacity: 0;
  visibility: hidden;
  transition: .3s linear;
  animation: .3s linear overlay-close;
}
.overlay.is-open {
  opacity: 1;
  visibility: visible;
  animation: .3s linear overlay-open;
}
@keyframes overlay-open {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }
  100% {
    transform: scaleY(1);
    transform-origin: top;
  }
}
@keyframes overlay-close {
  0% {
    transform: scaleY(1);
    transform-origin: bottom;
  }
  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}

下から表示され上に向かって閉じる形にしたい場合は、@keyframesのtransform-originの値を下記のように反対にすれば実装できます。

@keyframes overlay-open {
  0% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
  100% {
    transform: scaleY(1);
    transform-origin: bottom;
  }
}
@keyframes overlay-close {
  0% {
    transform: scaleY(1);
    transform-origin: top;
  }
  100% {
    transform: scaleY(0);
    transform-origin: top;
  }
}

オープン時は左から、クローズ時は右へ

こちらはオープン時は左からオーバーレイが表示されますが、クローズ時は右に向かって閉じていく形にしたものです。
実装にはCSSを下記のように記述します。

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .7);
  opacity: 0;
  visibility: hidden;
  transition: .3s linear;
  animation: .3s linear overlay-close;
}
.overlay.is-open {
  opacity: 1;
  visibility: visible;
  animation: .3s linear overlay-open;
}
@keyframes overlay-open {
  0% {
    transform: scaleX(0);
    transform-origin: left;
  }
  100% {
    transform: scaleX(1);
    transform-origin: left;
  }
}
@keyframes overlay-close {
  0% {
    transform: scaleX(1);
    transform-origin: right;
  }
  100% {
    transform: scaleX(0);
    transform-origin: right;
  }
}

向きを逆にしたい場合は上下のときと同様で、@keyframesのtransform-originの値を下記のように反対にすれば実装できます。

@keyframes overlay-open {
  0% {
    transform: scaleX(0);
    transform-origin: right;
  }
  100% {
    transform: scaleX(1);
    transform-origin: right;
  }
}
@keyframes overlay-close {
  0% {
    transform: scaleX(1);
    transform-origin: left;
  }
  100% {
    transform: scaleX(0);
    transform-origin: left;
  }
}

重ねる #1

こちらはオーバーレイとして使用するものを疑似要素を使って2つ用意し、それぞれに違うエフェクトを指定しつつ最終的にひとつのオーバーレイが任意の見栄えで表示されているような形にしたものです。
実装にはCSSを下記のように記述します。

.overlay,
.overlay::before,
.overlay::after {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  transition: .3s linear;
}
.overlay {
  opacity: 0;
  visibility: hidden;
}
.overlay::before,
.overlay::after {
  content: '';
  background: rgba(0, 0, 0, .45);
}
.overlay::before {
  transform: translateY(-100%);
}
.overlay::after {
  transform: translateY(100%);
}
.overlay.is-open {
  opacity: 1;
  visibility: visible;
}
.overlay.is-open::before,
.overlay.is-open::after {
  transform: translateY(0);
}

上記サンプルコードの場合は、まずそれぞれの疑似要素に最終的に使用したいオーバーレイのカラーや透過率とは少し異なるカラーを指定しつつ、初期配置で::before疑似要素を上に、::after疑似要素を下にそれぞれ配置しておきます。
あとは、オープン時にtransform: translateY(0);を使ってそれらがウィンドウを覆うように指定することで2つのオーバーレイ要素が重なり、最終的に任意の見栄えでひとつのオーバーレイが表示されているような見せ方ができます。
このサンプルは黒を少し透過させた同じカラー指定を重ねていますが、例えば初期カラーで上を赤、下を青というようにそれぞれ異なるものを指定し、最終的に重なると紫のオーバーレイがひとつ表示されているように見せたりなど、異なるカラーを組み合わせても面白いと思います。

ちなみに、上下ではなく左右から表示させる形にしたい場合は、transform: translateY()をそれぞれtransform: translateX()に変更すれば実装できます。

重ねる #2

同じく疑似要素を使って2つのオーバーレイを重ねるタイプのもので、こちらは傾斜を加えたものが同じ方向から少しタイミングをずらして表示されるようにしたものです。
実装にはCSSを下記のように記述します。

.overlay,
.overlay::before,
.overlay::after {
  position: fixed;
  top: 0;
  z-index: 2;
  height: 100%;
}
.overlay {
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: .3s linear;
}
.overlay::before,
.overlay::after {
  left: 50%;
  content: '';
  width: 200%;
  margin-left: -100%;
  background: rgba(0, 0, 0, .45);
  transform: skewX(-30deg) translateX(-100%);
  transition: transform .3s linear .3s;
}
.overlay.is-open {
  opacity: 1;
  visibility: visible;
}
.overlay.is-open::before {
  transform: skewX(-30deg) translateX(0);
  transition: transform .3s linear;
}
.overlay.is-open::after {
  transform: skewX(-30deg) translateX(0);
  transition: transform .3s linear .15s;
}

これまで紹介してきたオーバーレイとして使用していた要素にはいずれもwidth: 100%;を使用していましたが、こちらに関しては傾斜を加えているためにこれまでと同様にwidth: 100%;だと見栄えがウィンドウ全体を覆ってくれないので、サイズにwidth: 200%;を指定して、leftやmargin-leftを使って位置を調整しています。（位置調整の仕方はもっとスマートにできるかも...）
また、このサンプルに関してはクローズ時にそのままフェードアウトしていくエフェクトを指定しています。

分割表示

上2つも複数のオーバーレイ要素を使うタイプでしたが、最後はさらに複数の要素を使用してみたもので、分割したものをそれぞれアニメーション付きで表示させ、最終的にひとつのオーバーレイが表示されているような見栄えになります。
このサンプルコードの場合はオーバーレイが6つに分割されたような見栄えにしており、オープン時にそれぞれが回転しながら表示されるというものです。

こちらのサンプルに関してはHTMLを下記のように記述し、<div class="overlay"></div>の中に3つの要素（今回のサンプルではdiv要素を使用）を追加します。

<div class="overlay">
  <div></div>
  <div></div>
  <div></div>
</div>

CSSは下記のように記述します。

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: .6s linear .6s;
}
.overlay div::before,
.overlay div::after {
  position: fixed;
  left: 0;
  content: '';
  width: 100%;
  height: calc(100% / 6);
  background: rgba(0, 0, 0, .7);
  transform: rotateX(-270deg);
  transition: .3s linear;
}
.overlay div:nth-child(1)::before {
  top: 0;
}
.overlay div:nth-child(1)::after {
  top: calc(100% / 6);
  transition-delay: .1s;
}
.overlay div:nth-child(2)::before {
  top: calc(100% / 6 * 2);
  transition-delay: .2s;
}
.overlay div:nth-child(2)::after {
  top: calc(100% / 6 * 3);
  transition-delay: .3s;
}
.overlay div:nth-child(3)::before {
  top: calc(100% / 6 * 4);
  transition-delay: .4s;
}
.overlay div:nth-child(3)::after {
  bottom: 0;
  transition-delay: .5s;
}
.overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: .6s linear;
}
.overlay.is-open div::before,
.overlay.is-open div::after {
  transform: rotateX(0);
}

各div要素の疑似要素をオーバーレイの分割要素のひとつと考え、今回は全部で6つ必要なので3つのdivを用意してそれぞれの::before, ::after疑似要素に少し異なるスタイルをそれぞれ指定しています。
各分割要素の高さ指定やtopの位置指定などにはcalc()を用いており、もし数の変更があった場合にもこの数値を任意のものにしてあげればわざわざ計算し直したりする手間を省けると思います。
あとは、Sassを利用しているのであればtransition-delayの指定なども含め@forを利用したりすることでも楽に指定できるかなと思います。

今回はそれぞれの分割要素が回転しながら上から順に表示されるものですが、例えばrotateX()ではなくtranslateY()を使ってそれぞれが下からフェードインしてくるエフェクトにしてみたり、あとは縦だけでなく横でも分割してタイルが並んでいるように配置して、それらがランダムでバラバラに表示されるような見栄えにしてみても面白そうです。

なんとなく気付いた方もいると思いますが、はじめに紹介している「フェードイン」のコードをベースにtransformを組み合わせてあげるだけでもいろいろな見せ方が可能で、さらに疑似要素を使うとかanimationを組み合わせればより凝った見せ方にできるので、興味ある人は自身でもいろいろ試してみてください。