50 Project In 50 Days-Blurry Loading

Parkboss·2025년 9월 1일

50 Project In 50 Days

목록 보기

4/8

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Blurry Loading</title>
  </head>
  <body>
    <section class="bg"></section>
    <div class="loading-text">0%</div>

    <script src="script.js"></script>
  </body>
</html>

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
}

위에 자바스크립트가 이해가 안간다.

// 4. scale 함수 (제일 중요한 부분)
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
}

👉 이 함수는 숫자의 범위를 다른 범위로 바꿔주는 함수예요.

예시로 설명할게요:

scale(load, 0, 100, 1, 0)
→ load가 0일 땐 1, load가 100일 땐 0이 나오도록 변환.
즉, 투명도(1 → 0) 로 변환하는 거예요.

scale(load, 0, 100, 30, 0)
→ load가 0일 땐 30, load가 100일 땐 0이 나오도록 변환.
즉, 블러 정도(30px → 0px) 로 변환하는 거예요.