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

YiHangMa
687 阅读2分钟

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

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

背景

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

最终效果

模糊加载.gif

一、添加 HTML 文件

<div class="bg"></div>
<div class="loading-text">0%</div>

二、添加 CSS 文件

先初始化页面

  1. 设置 * 为 box-sizing: border-box
  2. 设置 body 来使整个项目居中
* {
  box-sizing: border-box;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

主要的 CSS 代码

.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;
}

三、添加 JS 文件

主要逻辑

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

scale 公式

  • 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
}

❤️ 感谢大家

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

如果你喜欢这篇文章的话，可以「点赞」 + 「收藏」 + 「转发」 给更多朋友。

avatar
文章
阅读
粉丝