こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
実装するもの
今回は、ローディング処理のスタイリングについて学びました。
demoは、「こちら」で確認できます。
JavaScript版
ワークスペース
必要なファイルは、以下の通りです。
|
1 2 3 4 5 6 |
$ tree . ├── index.html ├── script.js └── style.css |
HTML&JavaScript
|
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> |
|
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 } |
このHTMLをブラウザ上で表示すると以下のようになります。
スタイリング
先ほど作成したページにスタイルをつけていきます。
なお、項目のbgやbodyは、HTMLの要素です。
全体のスタイル
全体に適用するスタイルを定義します。
|
1 2 3 4 5 6 7 8 9 |
/* フォント */ @import url("https://fonts.googleapis.com/css?family=Ubuntu"); * { /* ボックス要素のサイズを算出 パディング(padding)とボーダー(border)を 幅(width)と高さ(height)に含める */ box-sizing: border-box; } |
bg
bgのスタイリングをします。
|
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 |
.bg { /* 背景画像を設定 単一の画像 / 中央寄せ / 画像比率 cover -> 画像の縦横比を崩すことなく画像ができるだけ 大きくなるよう拡大縮小する */ 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; /* 上部から-30px */ top: -30px; /* 左部から-30px */ left: -30px; /* 幅 vw -> ビューポートの幅に対する割合 */ width: calc(100vw + 60px); /* vh -> ビューポートの高さに対する割合 高さ */ height: calc(100vh + 60px); /* 表示のZ軸方向表示の優先順位 */ z-index: -1; /* ボカシ */ filter: blur(0px); } |
body
bodyのスタイリングをします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
body { /* フォント */ font-family: "Ubuntu", sans-serif; /* 要素をflexにする */ display: flex; /* flexアイテムを縦中央に配置 */ align-items: center; /* flexアイテムを横中央に配置 */ justify-content: center; /* ビューポート（画面サイズ）の高さに対する割合 100vhは画面の高さと同じ（100%）を表す */ height: 100vh; /* はみ出た画像を非表示 */ overflow: hidden; margin: 0; } |
loading-text
loading-textのスタイリングをします。
|
1 2 3 4 5 6 |
.loading-text { /* フォントサイズ */ font-size: 50px; /* フォントの色 */ color: #fff; } |
ページをリロードするとローディングテキストがスタイリングされたことがわかります。
これで、完成です。
おわりに
flexを使ったページの中央配置についてはだんだん慣れてきましたが、バックグランド画像のプロパティ設定は少し難しく感じました。これは慣れていくしかないか^^;
そろそろ気合の入ったオリジナルアプリでも作りましょうかね^^
それでは、また！
CSSまとめ
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 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
/* フォント */ @import url("https://fonts.googleapis.com/css?family=Ubuntu"); * { /* ボックス要素のサイズを算出 パディング(padding)とボーダー(border)を 幅(width)と高さ(height)に含める */ box-sizing: border-box; } body { /* フォント */ font-family: "Ubuntu", sans-serif; /* 要素をflexにする */ display: flex; /* flexアイテムを縦中央に配置 */ align-items: center; /* flexアイテムを横中央に配置 */ justify-content: center; /* ビューポート（画面サイズ）の高さに対する割合 100vhは画面の高さと同じ（100%）を表す */ height: 100vh; /* はみ出た画像を非表示 */ overflow: hidden; margin: 0; } .bg { /* 背景画像を設定 単一の画像 / 中央寄せ / 画像比率 cover -> 画像の縦横比を崩すことなく画像ができるだけ 大きくなるよう拡大縮小する */ 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; /* 上部から-30px */ top: -30px; /* 左部から-30px */ left: -30px; /* 幅 vw -> ビューポートの幅に対する割合 */ width: calc(100vw + 60px); /* vh -> ビューポートの高さに対する割合 高さ */ height: calc(100vh + 60px); /* 表示のZ軸方向表示の優先順位 */ z-index: -1; /* ボカシ */ filter: blur(0px); } .loading-text { /* フォントサイズ */ font-size: 50px; /* フォントの色 */ color: #fff; } |
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。