This is the sixth day of my participation in the August More text Challenge. For details, see:August is more challenging

BattleKing warehouse: Github, CodePen blog: CSDN, nuggets feedback email: [email protected] Special statement: original is not easy, shall not be reproduced without authorization or plagiarism, if you need to reprint can contact the author authorization

background

Fuzzy loading animation: It refers to the animation effect of decreasing the blur of the page as the loading progress increases. This animation is usually used for the first time to enter the site, blog home page, personal page, etc. In some high-end products, in order to imitate people just get up opened his eyes, feels when things are greeted with fuzzy load page, doing so can have a better immersive experience, and can make sense, but because of the effect is not as intuitive and apply common loading animation scene and so on reasons, has not been widely adopted by enterprises.

The final result

1. Add HTML files

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

Add CSS files

Initialize the page first

  1. Set up the* 为 box-sizing: border-box
  2. Set up thebodyTo center the project
* {
  box-sizing: border-box;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}
Copy the code

The main CSS code

.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;
}
Copy the code

Add JS file

The main logic

  1. throughdocument.querySelector('.loading-text')To obtain.loading-textnode
  2. throughdocument.querySelector('.bg')To obtain.bgnode
  3. theloadIs initialized to0
  4. throughsetInterval(blurring, 30)To loop throughBlurring methods
  5. inBlurring methods 中 loadThe value of is constantly increasing, whenloadIs equal to the100When usingsetIntervalTo close the timer and end the loop
  6. becauseopacityThe value range of is0-1 ， filterThe value range of is0-100., so we’re going to callScale methodTo implement the input of the same function, the output of bothopacityIs in the range offilterValue range of

Scale formula

  • Scale formula source: Stack Overflow
  • Scale formula works: inSame domain, the inputThe same numberBased on theDifferent rangeTo return toThe same proportion of values
  • const scale = (num, in_min, in_max, out_min, out_max)
  • The first parameternumIs the value passed in
  • Second parameterin_minIs the minimum input
  • Second parameterin_maxIs the maximum value of the input
  • Second parameterout_minIs the minimum value of output
  • Second parameterout_maxIs the maximum output
  • in_min 和 in_maxYou can view it as your domain[in_min, in_max]
  • out_min 和 out_maxYou can view it as the range of values[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
}
Copy the code

❤️ Thank you all

If this post is helpful to you, give it a thumbs-up. Your thumbs-up are my motivation.

If you like this post, you can “like” + “bookmark” + “forward” to more friends.