快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

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

????前言

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

????分析


创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都做网站、网站制作、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的文登网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!

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

????布局

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

????图片大小

  • 图片的宽高如果只是设置成100vw100vh的话,在边界处会出现白色模糊区域(滤镜导致)。
  • 可以将背景图片的宽高设置大一些,然后再调整topleft属性,然后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} \]
当前名称:[前端小项目] 模糊加载 blurry loading (50projects50days)
链接地址:http://6mz.cn/article/dsojpdo.html

其他资讯