たまに真っ白の画面からコンテンツがふわっと表示されるサイトを見かけることはありませんか？
ページを開いた瞬間にコンテンツが表示されても良いのですが、このような演出がされるとちょっとワクワクしますよね。
今回はページを開いたときにサイトの背景色のベタからコンテンツがふわっと表示させる方法をお伝えします。
やり方は簡単なので、既存サイトにも取り入れられます。
編集するのはHTML、CSS、JavaScript（jQuery）の３つだけです。
これを実装すると、僕のポートフォリオのように表示されます。
GIFを貼ろうと思ったけどうまく収録できなかったので、面倒ですがリンクを踏んでください。ごめんなさい。
それでは早速見ていきましょう。
実装方法
まずはHTMLファイルを書き換えます。
bodyタグの直下に演出用の空のタグを設置し、他のheaderタグなどは別途divタグでまとめます。
<body>
<!-- この中にheaderなどを入れてください -->
<div class="siteWrap">
<header>ヘッダー</header>
<main>コンテンツ</main>
<footer>フッター</footer>
</div>
<!-- ふわっと表示させる要素 -->
<div class="siteFadeIn"></div>
</body>既存サイトの場合、bodyタグにtransformやoverflowが掛かっているとpositionが効かないので、上書きします。
body {
position: relative;
z-index: 1;
// positionが効くように念の為上書きする
transform: none;
overflow: visible;
}
// 読み込み時にふわぁっと表示させる
.siteFadeIn {
position: fixed;
z-index: 9999999999;
top: 0;
left: 0;
width: 100%;
min-height: 100vh;
height: 100%;
display: block;
background-color: #fff; // サイトのベースカラーと同じ色を指定
pointer-events: none;
filter: opacity(1);
}
.siteFadeIn&.opc {
filter: opacity(0);
transition: filter 1s ease-in; // 表示させる速さを指定
}
jQueryで演出用の要素にopcを付与して、そこから先は上のCSSでtransitionを使って演出します。
// 読み込み時にふわぁっと表示させる
jQuery(function () {
jQuery(".siteFadeIn").addClass("opc");
});これでふわっと表示される演出は完成です。
ちなみに、ちゃんと演出されないという人は、先にjQueryが読み込まれているか確認してみてください。
そのままコピペしているのであれば、ほぼ間違いなく読み込みの順番が原因です。
最後に
いかがでしたでしょうか。
躓かずに簡単に実装できましたか？
気をつけないといけないのは、ここで紹介した演出はローディング画面としては使えない点です。
全ページで必ず実行されるので、ページを移動するたびにローディングが出てきたら嫌ですもんね。
ローディング画面の作り方は別でCookieを使って条件分岐をするので、難易度はもう少し高めです。
こちらも記事に書く予定なので、それまでお待ち下さい。
コメント