NowLoadingにおけるデメリットは、NowLoadingに必要な表示モジュールの読み込みが遅いと本末転倒になってしまう可能性があるという事です。
なので、NowLoadingに使われるソースはできるだけ最小限で、できることならCSSと、最小限のDOM構造のHTMLのみで構築されているのが望ましいでしょう。
仕事としては、ページの読み込み完了までの間の場繋ぎ演出なので、ページの読み込みが早いサイトほど、ほとんど見られないのが現実です。
せっかく作ってもほぼ見られないし、作られていないケースも多いようです。
そんな中今回は、ストレート&シンプルな"NowLoading"を紹介したいと思います。
ソースコード: css版
index.html
<div id="page-loading">
<div>
<p>l</p>
<p>o</p>
<p>a</p>
<p>d</p>
<p>i</p>
<p>n</p>
<p>g</p>
<p>.</p>
<p>.</p>
<p>.</p>
</div>
</div>
style.css
#page-loading {
position: fixed;
display: grid;
place-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #fff;
overflow: hidden;
}
#page-loading > * {
display: flex;
justify-content: center;
gap: 5px;
}
#page-loading > * > * {
display: inline-block;
color: #000;
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', '游ゴシック Medium', YuGothic, YuGothicM, 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo, sans-serif;
font-size: 2rem;
font-weight: bold;
animation: rotate 2s infinite linear;
text-transform: uppercase;
margin:0;
}
#page-loading > * > *:nth-child(2) { animation-delay: 0.1s; }
#page-loading > * > *:nth-child(3) { animation-delay: 0.2s; }
#page-loading > * > *:nth-child(4) { animation-delay: 0.3s; }
#page-loading > * > *:nth-child(5) { animation-delay: 0.4s; }
#page-loading > * > *:nth-child(6) { animation-delay: 0.5s; }
#page-loading > * > *:nth-child(7) { animation-delay: 0.6s; }
#page-loading > * > *:nth-child(8) { animation-delay: 0.7s; }
#page-loading > * > *:nth-child(9) { animation-delay: 0.8s; }
#page-loading > * > *:nth-child(10) { animation-delay: 0.9s; }
@keyframes rotate {
70% { transform: rotateX(0deg); }
100% { transform: rotateX(360deg); }
}
デモ
l
o
a
d
i
n
g
.
.
.
改良ポイント
文字をpタグでベタ書きしているので、大体10文字前後ぐらいであれば、好きな文字を入れて、表現できます。 文字数と文字サイズは、アニメーションスピードと、レスポンシブでスマホ表示にした時に、横が長すぎて、勝手に改行してしまわないように、 最低320pxぐらいを目処に調整するのがいいと思います。使用すると効果的なページ
文字系のNowLoadingは、文章を読ませるタイプのWebページで使用すると印象がいいでしょう。 文字がくるくると回転するアニメーションをしているので、画像の切り替えアニメーションを、このNowLoadingと同じアニメーションパターンにするような、パネル形式の画像一覧サイトなどでも効果的かもしれませんね。 ページデザインとNowLoadingを合わせることで、ブランド力が強くなる効果もあるので、色なども含めて改良して使うといいでしょう。Javascript対応版ソースコード
<div id="page-loading">
<p>loading...</p>
</div>
<style>
#page-loading {
display: grid;
place-items: center;
width: 100%;
height: 150px;
box-sizing: border-box;
background-color: #fff;
overflow: hidden;
}
#page-loading *{
margin:0;
}
#page-loading > * {
display: flex;
justify-content: center;
gap: 5px;
}
#page-loading > * > * {
display: inline-block;
color: #000;
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', '游ゴシック Medium', YuGothic, YuGothicM, 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo, sans-serif;
font-size: 2rem;
font-weight: bold;
animation: rotate 2s infinite linear;
text-transform: uppercase;
}
@keyframes rotate {
70% { transform: rotateX(0deg); }
100% { transform: rotateX(360deg); }
}
</style>
<script>
{
const root = document.getElementById("page-loading")
const area = root.firstElementChild
const text = area.textContent.trim()
const list = text.split('').map((e,i) => {
const s = i * 0.1
return `<p style="animation-delay:${s}s;">${e}</p>`
}).join('')
area.innerHTML = list
}
</script>
0 件のコメント:
コメントを投稿