こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
実装するもの
今回は、ページを表示する時にloading処理が走るプログラムを学習しました。
demoは、「こちら」で確認できます。
環境構築
最初に、簡単な環境構築をお願いします。
必要なファイルは、以下の通りです。
|
1 2 3 4 5 6 |
$ tree . ├── index.html ├── script.js └── style.css |
CSS版
開発
ページの作成
最初にページの作成をしましょう。index.htmlに次のコードを記述してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>Blurry Loading</title> </head> <body> <section class="bg"></section> <div class="loading-text">0%</div> <script src="script.js"></script> </body> </html> |
このHTMLをブラウザ上で表示すると以下のようになります。
スタイルの追加
次にスタイルをstyle.cssに記述しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
@import url('https://fonts.googleapis.com/css?family=Ubuntu'); * { box-sizing: border-box; } body { font-family: 'Ubuntu', sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } .bg { background: url('https://images.unsplash.com/photo-1576161787924-01bb08dad4a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2104&q=80') no-repeat center center/cover; position: absolute; top: -30px; left: -30px; width: calc(100vw + 60px); height: calc(100vh + 60px); z-index: -1; filter: blur(0px); } .loading-text { font-size: 50px; color: #fff; } |
ここまで実装すると以下のようになります。
JavaScriptの実装
loading処理の実現において、先ほど設定したCSSの「filter」がキモです。
|
1 2 3 4 |
.bg { ... filter: blur(0px); <<< これ } |
この値を0% -> 3% -> 5% -> 10%と変更してみましょう。
画像がぼやけていくことがわかりますね。つまりこの数値を操作することでloading処理が実装できます。
要素を取得する
JavaScriptで制御すべき要素が2つあります。最初にこれらの要素を取得しましょう。
|
1 2 3 4 5 |
// 要素の取得 // ローディングテキスト const loadText = document.querySelector('.loading-text') // background const bg = document.querySelector('.bg') |
setInterval/clearIntervalの実装
loading処理は、ページが読み込まれてから特定の関数を一定間隔で実行することで、filter: blur(0px);
この一定間隔の処理を実現するために、JavaScriptの「setInterval」を使いましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// 要素の取得 ... // loading状況(%) let loading = 0 // 30ms毎にblurring関数を実行する let timer = setInterval(blurring, 30) function blurring() { // インクリメントする loading++ console.log(loading) } |
setIntervalの第一引数には、実行したい関数(ここでは、blurring)を指定します。そして第二引数には、実行間隔をミリ秒(1/1000秒)を指定します。
これを設定すると30ミリ秒間隔でblurring関数が永遠に実行されます。
特定の条件下でこのタイマーを止めたいので、clearIntervalを設定します。
|
1 2 3 4 5 6 7 8 9 10 11 |
let timer = setInterval(blurring, 30) function blurring() { // インクリメントする loading++ if(loading > 99) { clearInterval(timer) } console.log(loading) } |
ローディング状態が100%になったらタイマーを止める設定をしました。
loading状態を表示する
ローディングの進行状態を画面上に表示できるようにします。
|
1 2 3 4 5 6 7 8 9 10 |
function blurring() { // インクリメントする loading++ if(loading > 99) { clearInterval(timer) } loadText.innerText = `${loading}%` // 追加 } |
innerTextを使うと取得した要素のテキストを変更することができます。
loading状態のフェードアウト
次は、画面に表示されている「〇〇%」をフェードアウトする処理を実装しましょう。
|
1 2 3 4 5 6 7 8 9 10 |
function blurring() { ... // フェードアウト loadText.style.opacity = scale(loading, 0, 100, 1, 0) } // https://stackoverflow.com/questions/10756313/javascript-jquery-map-a-range-of-numbers-to-another-range-of-numbers const scale = (num, in_min, in_max, out_min, out_max) => { return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min } |
「loadText.style.opacity」のopacityの値を変更することで要素を徐々にフェードアウトすることができます。
opacityプロパティは、「0~1」の間で設定されていなければいけません。その範囲で計算ができるようにscale関数を実装しています(JavaScriptは変数に処理を格納できます)。
画像のフェードイン処理
最後にblurの値を操作して、画像のフェードインを実現しましょう。
|
1 2 3 4 5 6 |
function blurring() { // インクリメントする // フェードアウト // フェードイン bg.style.filter = `blur(${scale(loading, 0, 100, 30, 0)}px)` } |
これでOKです。
おわりに
今回は、setIntervalの使い方やScaleの計算手法など勉強になりましたね。CSSと組み合わせることで結構簡単に実装ができることもわかったと思います。
それでは、また！
JavaScriptまとめ
JavaScript ソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
/// 要素の取得 // ローディングテキスト const loadText = document.querySelector('.loading-text') // background const bg = document.querySelector('.bg') // loading状況(%) let loading = 0 // 30ms毎にblurring関数を実行する let timer = setInterval(blurring, 30) function blurring() { // インクリメントする loading++ if(loading > 99) { clearInterval(timer) } loadText.innerText = `${loading}%` // フェードアウト loadText.style.opacity = scale(loading, 0, 100, 1, 0) // フェードイン bg.style.filter = `blur(${scale(loading, 0, 100, 30, 0)}px)` } // https://stackoverflow.com/questions/10756313/javascript-jquery-map-a-range-of-numbers-to-another-range-of-numbers const scale = (num, in_min, in_max, out_min, out_max) => { return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min } |
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。