高质感的网页模糊加载特效｜8月更文挑战

这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战javascript

做者：battleKing
仓库：Github、CodePen
博客：CSDN、掘金
反馈邮箱：myh19970701@foxmail.com
特别声明：原创不易，未经受权不得转载或抄袭，如需转载可联系笔者受权css

背景

模糊加载动画：指随着加载的进度增长，页面模糊度也随之减小的动画效果，这种动画通常用于 首次进入网站、博客首页、我的页 等场景。在一些高端产品中，为了模仿人们刚起床睁开眼睛时，事物映入眼帘时的感受而采用页面模糊加载，这样作便可以有 更好的沉浸式体验、又能够制造质感，但由于这个效果没有普通加载动画那么 直观、适用场景多 等等缘由，未被企业普遍采用。html

最终效果

1、添加 HTML 文件

<div class="bg"></div>
<div class="loading-text">0%</div>
复制代码

2、添加 CSS 文件

先初始化页面java

设置 * 为 box-sizing: border-box
设置 body 来使整个项目居中

* {
  box-sizing: border-box;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}
复制代码

主要的 CSS 代码jquery

.bg {
    background: url('https://cdn.stocksnap.io/img-thumbs/960w/office-desk_OMRNL3FSZO.jpg') 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;
}
复制代码

3、添加 JS 文件

主要逻辑git

经过 document.querySelector('.loading-text')，获取 .loading-text 节点
经过 document.querySelector('.bg')，获取 .bg 节点
把 load 的值初始化为 0
经过 setInterval(blurring, 30) 来循环调用 blurring方法
在 blurring方法 中 load 的值不断递增，当 load 等于 100时，使用 setInterval 来关闭定时器，从而结束循环
由于 opacity 的取值范围是 0-1 ， filter 的取值范围是 0-100，因此咱们要调用 scale方法 来实现输入一样的函数，输出结果既符合 opacity 的取值范围，又符合 filter 的取值范围

scale 公式github

scale 公式来源：Stack Overflow
scale 公式做用：在相同定义域中，输入相同的数，基于不一样的值域，返回相同比例的值
const scale = (num, in_min, in_max, out_min, out_max)
第一个参数 num 是传入的数值
第二个参数 in_min 是输入的最小值
第二个参数 in_max 是输入的最大值
第二个参数 out_min 是输出的最小值
第二个参数 out_max 是输出的最大值
in_min 和 in_max能够当作是定义域 [in_min，in_max]
out_min 和 out_max能够当作是值域 [out_min，out_max]

const loadText = document.querySelector('.loading-text')
    const bg = document.querySelector('.bg')

    let load = 0

    let int = setInterval(blurring, 30)

    function blurring() {
        load++

        if (load > 99) {
            clearInterval(int)
        }

        loadText.innerText = `${load}%`
        loadText.style.opacity = scale(load, 0, 100, 1, 0)
        bg.style.filter = `blur(${scale(load, 0, 100, 30, 0)}px)`
    }

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
}
复制代码

❤️ 感谢你们

若是本文对你有帮助，就点个赞支持下吧，你的「赞」是我创做的动力。markdown

若是你喜欢这篇文章的话，能够「点赞」 + 「收藏」 + 「转发」给更多朋友。函数