#5 - Blurry Loading

✨ CSS

filter: blur

filter: blur(10px) 속성을 사용하면 특정 요소에 블러 처리를 할 수 있다.

✨ JavaScript

setInterval & clearInterval

setInterval(function, milliseconds);

💡 setInterval
일정한 시간 간격으로 코드(또는 함수)를 반복해서 실행하는 타이머

let intervalId = setInterval(sayHello, 1000);

// 일정 시간 후 반복 중지
clearInterval(intervalId);

💡 clearInterval
setInterval()로 시작한 반복을 멈추고 싶을 때 clearInterval()을 사용

❗️ setInterval()은 반복 실행을 멈추지 않으므로, 멈추기 위해서는 clearInterval를 사용하여 이 함수에 타이머 ID를 전달해야 한다.

scale 함수를 만들어 숫자의 범위끼리 map

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

숫자의 범위끼리를 mapping (stack overflow)

✔️ JS 코드

let time = setInterval(blurring, 30)

function blurring() {
  load++;
  console.log(load);

  if (load > 99) {
    clearInterval(time);
  }

  loading.innerText = `${load}%`;
  loading.style.opacity = scale(load, 0, 100, 1, 0);

  container.style.filter = `blur(${scale(load, 0, 100, 30, 0)}px)`;
}