[前端小項目] 模糊加載 blurry loading (50projects50days)

??前言

這個小項目源于github項目:?50 projects 50 days, 這個項目包含了50個小型前端項目，適合學習了Html+Css+JavaScript但是還沒有學習框架的前端新手作為練習。
這里是原項目對模糊加載的代碼實現??Blurry Loading.

??分析

變化過程：

數字從0不斷增長到100；
中間的百分比數字逐漸消失，即透明度opacity到1到0；
背景圖片從模糊變為清晰，濾鏡filter:blur()的參數設置為從30px到0px.

??布局

body使用flex布局，將文字置于屏幕中央即可。

??圖片大小

圖片的寬高如果只是設置成100vw和100vh的話，在邊界處會出現白色模糊區域(濾鏡導致)。
可以將背景圖片的寬高設置大一些，然后再調整top和left屬性，然后body設置overflow:hidden;，將白色模糊區域置于“屏幕”之外。

?進度模擬

JavaScript中使用setInterval()即可模擬進度不斷增加。
在進度值達到100時，使用clearInterval()取消進度增加。

??不同數值范圍之間的映射

由于進度值是從0到100，而數字文本的opacity參數是從1到0，模糊濾鏡的參數值是從30到0，不同的數值范圍之間需要有一個映射關系。

變量名	意義
$in\_min$	輸入范圍的起始值
$in\_max$	輸入范圍的終止值
$input$	輸入的值
$out\_min$	輸出范圍的起始值
$out\_max$	輸出范圍的終止值
$output$	輸出的值，即映射得到的值

輸入值在輸入范圍內占比：

\[scale_0 = \frac{input-in\_min}{in\_max - in\_min} \]

輸出值在輸出范圍內的占比：

\[scale_1 = \frac{output-out\_min}{out\_max - out\_min} \]

又因為輸入值在輸入范圍內的占比與輸出值在輸出范圍中的占比應保持一致：

\[\frac{input-in\_min}{in\_max - in\_min} = \frac{output-out\_min}{out\_max - out\_min} \]

化簡后，可得輸出值output：

\[output = \frac{input-in\_min}{in\_max - in\_min} \times (out\_max - out\_min) + out\_min \]

function scale(num, inMin, inMax, outMin, outMax) {
        return ((num - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
    }

該函數代碼參考自StackOverflow??map a range of numbers to another range of numbers

??代碼實現

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>blurry-loading</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            min-height: 100vh;
            /* 使用flex布局，將文字設置在屏幕中間 */
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .bg {
            position: absolute;
            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;
            filter: blur(0px);
            z-index: -1;
            /* blur濾鏡會導致圖片邊界出現白色區域，將圖片擴大可以改善 */
            top:-30px;
            left:-30px;
            width: calc(100vw + 60px);
            height: calc(100vh + 60px);
        }

        .load {
            /* 文字樣式 */
            font-size: 2rem;
            color: #fff;
            font-weight: bold;
            /* 設置為不可選中 */
            user-select: none;
        }
    </style>
</head>

<body>
    <section class="bg"></section>
    <p class="load">0%</p>
</body>
<script>
    // 獲取文字和背景圖片
    const loadText = document.querySelector('.load');
    const bg = document.querySelector('.bg');

    //load表示當前進度的百分比數字
    let load = 0;

    // setInterval:進度不斷增加，并渲染進度數字和背景模糊程度
    const int = setInterval(loading, 20);

    function loading() {
        //進度增加
        load++;

        //如果進度到達100，表示進度完成，不用增加了。
        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)`;
    }

    //https://stackoverflow.com/questions/10756313/javascript-jquery-map-a-range-of-numbers-to-another-range-of-numbers
    //這個函數的作用是：獲取 一個在某范圍內的值 映射到 另一個范圍時 對應的值。
    function scale(num, inMin, inMax, outMin, outMax) {
        return ((num - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
    }
</script>
</html>

posted @ 2022-06-27 17:07 feixianxing 閱讀(312) 評論(0) 收藏舉報

刷新頁面返回頂部

feixianxing