背景模糊式加载页面 Blurring-Loading
1. 概述
该项目本体模拟了一个背景会随着加载进度而逐渐从模糊变得清晰的加载页面.
本项目中将涉及如下知识点:
- 在静态文本中使用
JSP EL表达式 - 使用
blur()正片叠底达成背景图片模糊效果
效果:
2. 结构和切图
网页的基本结构非常简单, 只包含一个背景和水平, 垂直居中的加载进度文字:
1
2
3
4
<body>
<section class="background"></section>
<div class="loading-text">0%</div>
</body>
3. 编写 CSS 样式
首先确保文字水平, 垂直居中:
1
2
3
4
5
6
7
8
9
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
其次设定背景图片的位置与其初始状态下的模糊叠底:
1
2
3
4
5
6
7
8
9
10
.background{
background: url('../expanding-cards/avatar1.JPG') no-repeat center center/cover;
position: absolute;
top: -30px;
left: -30px;
width: calc(100vw + 60px);
height: calc(100vh + 220px);
z-index: -1;
filter: blur(0px);
}
注意此处使用了简化的 background 语法, 确保图片位于页面中心, 且一定能完整覆盖整个页面.
在 css3 中, 我们可以使用 filter() 为背景图片指定一个滤镜.
最后设置进度文字的大小和颜色:
1
2
3
4
.loading-text{
font-size: 100px;
color: white;
}
完整的 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
<style>
* {
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
.background{
background: url('../expanding-cards/avatar1.JPG') no-repeat center center/cover;
position: absolute;
top: -30px;
left: -30px;
width: calc(100vw + 60px);
height: calc(100vh + 220px);
z-index: -1;
filter: blur(0px);
}
.loading-text{
font-size: 100px;
color: white;
}
</style>
4. 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
const bg = document.querySelector('.background');
const loadText = document.querySelector('.loading-text');
// initialize the counter
let loaded = 0;
// execute function blurring() every 30ms
let int = setInterval(blurring, 30);
function blurring() {
loaded ++;
// mock up loaded completed
if (loaded > 99) {
clearInterval(int);
}
//set the blurring opacity of bg and the progress context
loadText.innerText = `${loaded}%`;
loadText.style.opacity = scale(loaded, 0, 100, 1, 0)
bg.style.filter = `blur(${scale(loaded, 0, 100, 30, 0)}px)`
}
// map a range number 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 DOM的setInterval()方法, 按照指定的周期调用blurring()函数起到模拟页面加载的效果. 用法详见此处 - 形如
${...}的语句被称为JSP EL表达式. 在中括号中的是JavaScript变量或表达式, 返回值是类型是文本, 因此可用于给CSS属性和HTML标签内容赋值.
最后, 完整的网页演示可见 此处
