DAY5-模糊加载

前言

这个项目来源于GitHub上的一个开源项目https://github.com/bradtraversy/50projects50days，总共有50个用来练手的前端项目，我学习然后复现效果，并记录学习笔记和心得。

效果展示

blurry-loading (点击查看)

HTML&CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>blurry-loading</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body{
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }


        .bg {
            background: url('https://images.unsplash.com/photo-1576161787924-01bb08dad4a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2104&q=80')
            no-repeat center center/cover;
            position: absolute;
            top: -30px;
            left: -30px;
            width: calc(100vw + 60px);
            height: calc(100vh + 60px);
            z-index: -1;
        }

        .text{
            color: #fff;
            font-size: 50px;
        }
    </style>
</head>

<body>
<div class="bg"></div>
<div class="text">0%</div>
</body>
</html>

JS

const loadText = document.querySelector('.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
    }

技术要点

  1. .bg的样式中在100的窗口的宽高下还加了60px，这是因为，我们在给.bg加上filter: blur的最大值为30px，这会导致，.bg的上下左右都会出现30px的模糊的白色区域，我们不想让这些白色区域展示出来，所以我们将宽高增加60px，然后利用定位让.bg向左上方-30px，但是这时候右下的30px的白色区域还是没有得到解决，这部分在窗口之外，拖动滚动条可以看到，我们只需要给body加上overflow: hidden即可解决。
  2. 第二点为js部分，scale函数的作用。作者指出来源为stackoverflow，该函数的作用是将一个数，映射到另一个范围中，比如num=1,num的取值范围是0-100，我们需要将num映射到0-15的范围中，我们就可以用这个函数。scale(1,0,100,0,15)。
DAY5-模糊加载
https://www.zhaojun.inkhttps://www.zhaojun.ink/archives/day5-blurry-loading
作者
卑微幻想家
发布于
2022-11-02
许可协议