画像読み込みの管理ができるJavaScriptライブラリ、imagesLoadedを利用して画像の透過度が変化して見えるローディングを実装します。
htmlは入れ子になった空のdivタグとローダーの画像を格納したpタグです。クラス名p-loaderのdivタグはローディング全体、クラス名p-loader-bgのdivタグはカーテンを開くような動作をするオーバーレイ、クラス名p-loader-innerのdivタグはローダーのフェードイン、クラス名p-loader-progressのdivタグは画像の透過度を変化させるオーバーレイです。
<body data-status="loading">
<div class="p-loader">
<div class="p-loader-bg"></div>
<div class="p-loader-inner">
<div id="js-loader-progress" class="p-loader-progress"></div>
<p class="p-loader-logo">
<img src="images/pc_logo.png" alt="" class="p-loader-logo-img">
</p>
</div>
</div>bodyタグのdata-status属性がloadingの間はローディングを表示します。ローディング中、bodyタグはoverflow: hidden;を指定してスクロールバーを非表示にします。
ローディング全体はローディング終了時、pointer-eventsをautoからnoneへ変化させます。ローディング中はpointer-eventsがnoneだと背面に隠れているコンテンツが選択できてしまいます。ローディング終了後はpointer-eventsがautoだとコンテンツが選択できません。displayプロパティをblockからnoneへ変更することなく、ローディング全体を無効化しています。
オーバーレイはローディング終了時、transform: translateX(100%);を指定してカーテンを左から右へ開くような動作で非表示にします。ローダーのフェードインはローディング終了時、opacity: 0;を指定します。画像の透過度を変化させるオーバーレイはJavaScriptでCSSを操作します。
body[data-status="loading"] {
overflow: hidden;
}
body[data-status="loading"] .p-loader {
pointer-events: auto;
}
.p-loader {
position: fixed;
z-index: 10000;
width: 100vw;
height: 100vh;
pointer-events: none;
}
body[data-status="loading"] .p-loader-bg {
transform: translateX(0);
}
.p-loader-bg {
position: relative;
z-index: 10000;
width: 100vw;
height: 100vh;
background: #fff;
transition: transform cubic-bezier(0.19, 1, 0.22, 1) 2s;
transform: translateX(100%);
}
body[data-status="loading"] .p-loader-inner {
opacity: 1;
}
.p-loader-inner {
position: absolute;
z-index: 10000;
top: 50%;
left: 50%;
opacity: 0;
transition: opacity cubic-bezier(0.19, 1, 0.22, 1) 2s;
transform: translate(-50%, -50%);
overflow: hidden;
}
.p-loader-progress {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.8);
transition: transform cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
}
.p-loader-logo {
max-width: 200px;
}JavaScriptのコードです。imagesLoaded('body');でbodyタグ内の画像の読み込みを検知します。画像の読み込み完了をひとつずつ検知して実行するprogressのイベントを利用して、画像の透過度を変化させるオーバーレイを段階的にtransform: translateX(100%);にします。これでオーバーレイはカーテンを左から右へ開くような動作で非表示になります。
setTimeoutで300ミリ秒後にローディングを終了することでタイミングを調整しています。
var imgLoad = imagesLoaded('body');
var progress = 0;
var per = 1 / imgLoad.images.length;
imgLoad.on('progress',function(){
progress += per;
$('#js-loader-progress').css('transform', 'translateX(' + progress * 100 + '%)');
});
$(window).on('load', function() {
setTimeout(function(){
$('body').attr('data-status', 'loaded');
}, 300);
});
