[前端小项目] 模糊加载 blurry loading (50projects50days)

?前言

• 这个小项目源于github项目:✨50 projects 50 days, 这个项目包含了50个小型前端项目，适合学习了Html+Css+JavaScript但是还没有学习框架的前端新手作为练习。
• 这里是原项目对模糊加载的代码实现?Blurry Loading.

---

?分析

• 变化过程：

1. 数字从0不断增长到100；
2. 中间的百分比数字逐渐消失，即透明度opacity到1到0；
3. 背景图片从模糊变为清晰，滤镜filter:blur()的参数设置为从30px到0px.

?布局

• body使用flex布局，将文字置于屏幕中央即可。

?图片大小

• 图片的宽高如果只是设置成100vw和100vh的话，在边界处会出现白色模糊区域(滤镜导致)。
• 可以将背景图片的宽高设置大一些，然后再调整top和left属性，然后body设置overflow:hidden;，将白色模糊区域置于“屏幕”之外。

⏱进度模拟

• JavaScript中使用setInterval()即可模拟进度不断增加。
• 在进度值达到100时，使用clearInterval()取消进度增加。

?不同数值范围之间的映射

• 由于进度值是从0到100，而数字文本的opacity参数是从1到0，模糊滤镜的参数值是从30到0，不同的数值范围之间需要有一个映射关系。
  
  

变量名	意义
$in\_min$	输入范围的起始值
$in\_max$	输入范围的终止值
$input$	输入的值
$out\_min$	输出范围的起始值
$out\_max$	输出范围的终止值
$output$	输出的值，即映射得到的值

输入值在输入范围内占比：

\[scale_0 = \frac{input-in\_min}{in\_max - in\_min} \]