高質感的網頁模糊加載特效｜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

若是你喜歡這篇文章的話，能夠「點贊」 + 「收藏」 + 「轉發」給更多朋友。函數