1. このページの目的
スケルトンスクリーンを実装する。
2. デモ
Ctrl + Shift + R キーで、ブラウザをリロードする。
- 画像の読み込みには 3秒掛かるように作ってあります。
3. コード
HTML
<img id="img1" src="./get_image.php" width="500"/>
<div id="skelton" class="loading"></div>
- 画像を遅延してロードするために、PHPを経由させている。
- 画像の読込中、id=skelton の要素にスケルトンの表示をさせる。
CSS
.loading {
position: relative;
display: block;
width: 100%;
height: 100%;
background: #ccc;
}
@keyframes skeleton-animation {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
.loading::before {
position: absolute;
top: 0;
left: 0;
content: "";
display: block;
height: 100%;
width: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.2),
transparent
);
animation: skeleton-animation 1.0s linear infinite;
}
#skelton {
width: 500px;
height: 355px;
}
- positionプロパティを使い、スケルトン要素とその疑似要素beforeを重ねている。
- スケルトン要素の背景色を #ccc にし、その疑似要素beforeには、グラデーションを設定している。左右が透明、真ん中あたりが縦方向に白っぽくなる。デフォルトでは、疑似要素が手前に表示されるので、#ccc の手前側に白いグラデーションが表示される。
- @keyframes では transform を使い、スケルトン要素がそのまま1つ分左側に移動させた位置から、右側に移動させた位置まで動くように指定している。グラデーションさせた要素を動かすことで、キラキラする。これをシマー効果と呼ぶ。
JavaScript
document.querySelector('#img1').classList.add('hidden');
window.addEventListener('load', (event) => {
document.querySelectorAll('.loading').forEach((e) => {
e.classList.add('hidden');
});
document.querySelector('#img1').classList.remove('hidden');
});
- 最初にimg要素を非表示にしている（一瞬表示されてしまうので本当はよくない）。
- 画像読込み完了時に、スケルトン要素を非表示にしている。合わせて、img要素を表示している。
4. CodePenで試した
See the Pen Untitled by laboradian (@laboradian) on CodePen.