すべてCSSを使って実装しているので、カラーや透過率などのデザイン的な部分はもちろん、表示されるスピードやタイミングについてもCSSで調整可能です。
また、全体的にシンプルで使いやすいもの中心なのでそのまま利用するだけでなく、いずれかをベースにさらに手を加えてユニークなエフェクトにしたりもできると思います。
以下で紹介しているのは基本的にオーバーレイ要素として下記HTMLのようなdiv要素をひとつ用意し、それに対してCSSでエフェクトを付けたものになります。
CSSについてはプレフィックスを省略しているので必要であれば追記してください。
オーバーレイのサイズについてはwidthとheightにそれぞれ100%指定をしていますが、100vwや100vhなどを使う形にでも大きな問題なく実装できると思います。
また、以下で紹介しているコードはオーバーレイが表示されたときに.is-openというclassが付与される想定でスタイル指定をしているので、class名を変更したい場合はサンプルコードでそれぞれ.is-openとなっている箇所を任意で変更してください。
ここでは実装するためのコードのみ紹介しているので、実際の表示を以下デモで確認しつつ、気になるエフェクトがあれば簡単な説明やコードをこのエントリー内で確認してみてください。
シンプルにフェードイン表示させる方法で、実装にはCSSを下記のように記述します。
中央からフェードインしつつページ全体に広がるようなエフェクトで、実装にはCSSを下記のように記述します。
先ほどはオーバーレイが上下左右の全方向に向かって大きくなる感じのものでしたが、こちらは中央から上下に向かって広がるタイプのものです。
上からオーバーレイが降りてくるようなエフェクトで、実装にはCSSを下記のように記述します。
上のコードの一部を変更することで左から右に向かってオーバーレイが表示される形も実装できます。
こちらは先ほど紹介したようにオープン時は上からオーバーレイが表示されますが、クローズ時に上に戻るのではなく下に向かって閉じていく形にしたものです。
こちらの実装はanimationを組み合わせており、実装にはCSSを下記のように記述します。
こちらはオープン時は左からオーバーレイが表示されますが、クローズ時は右に向かって閉じていく形にしたものです。
こちらはオーバーレイとして使用するものを疑似要素を使って2つ用意し、それぞれに違うエフェクトを指定しつつ最終的にひとつのオーバーレイが任意の見栄えで表示されているような形にしたものです。
あとは、オープン時にtransform: translateY(0);を使ってそれらがウィンドウを覆うように指定することで2つのオーバーレイ要素が重なり、最終的に任意の見栄えでひとつのオーバーレイが表示されているような見せ方ができます。
同じく疑似要素を使って2つのオーバーレイを重ねるタイプのもので、こちらは傾斜を加えたものが同じ方向から少しタイミングをずらして表示されるようにしたものです。
これまで紹介してきたオーバーレイとして使用していた要素にはいずれもwidth: 100%;を使用していましたが、こちらに関しては傾斜を加えているためにこれまでと同様にwidth: 100%;だと見栄えがウィンドウ全体を覆ってくれないので、サイズにwidth: 200%;を指定して、leftやmargin-leftを使って位置を調整しています。(位置調整の仕方でもっとスマートにできる方法あれば是非教えてください。)
上2つも複数のオーバーレイ要素を使うタイプでしたが、最後はさらに複数の要素を使用してみたもので、分割したものをそれぞれアニメーション付きで表示させ、最終的にひとつのオーバーレイが表示されているような見栄えになります。
このサンプルコードの場合はオーバーレイが6つに分割されたような見栄えにしており、オープン時にそれぞれが回転しながら表示されるというものです。
こちらのサンプルに関してはHTMLを下記のように記述し、<div class="overlay"></div>の中に3つの要素(今回のサンプルではdiv要素を使用)を追加します。
各分割要素の高さ指定やtopの位置指定などにはcalc()を用いており、もし数の変更があった場合にもこの数値を任意のものにしてあげればわざわざ計算し直したりする手間を省けると思います。
あとは、Sassを利用しているのであればtransition-delayの指定なども含め@forを利用したりすることでも楽に指定できるかなと思います。
今回はそれぞれの分割要素が回転しながら上から順に表示されるものですが、例えばrotateX()ではなくtranslateY()を使ってそれぞれが下からフェードインしてくるエフェクトにしてみたり、あとは縦だけでなく横でも分割してタイルが並んでいるように配置して、それらがランダムでバラバラに表示されるような見栄えにしてみても面白そうです。
なんとなく気付いた方もいると思いますが、はじめに紹介している「フェードイン」のコードをベースにtransformを組み合わせてあげるだけでもいろいろな見せ方が可能で、さらに疑似要素を使うとかanimationを組み合わせればより凝った見せ方にできるので、興味ある人は自身でもいろいろ試してみてください。