Day 5

50Days/day5/script.js

@@ -0,0 +1,18 @@
+const loadText = document.querySelector('.loading-text');
+const bg = document.querySelector('.bg');
+
+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;
+};
+
+let load = 0;
+let int = setInterval(blurring, 15);
+
+function blurring() {
+  load++;
+  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)`;
+}