feat: day 5

Author: solygambas

005-blurry loading/script.js

@@ -7,13 +7,16 @@ const 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)`;
+  // Fade Out Text Sooner or Later
+  loadText.style.opacity = scale(load, 0, 50, 1, 0);
+  // Modify Initial Blur Amount
+  bg.style.filter = `blur(${scale(load, 0, 100, 10, 0)}px)`;
 };
 
 // For reference: https://stackoverflow.com/questions/10756313/javascript-jquery-map-a-range-of-numbers-to-another-range-of-numbers
 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 int = setInterval(blurring, 30);
+// Change the Loading Speed
+let int = setInterval(blurring, 10);

005-blurry loading/style.css

@@ -15,7 +15,8 @@ body {
 }
 
 .bg {
-  background: url("https://images.unsplash.com/photo-1610217053402-b187336e9443?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80")
+  /* Use a Different Background Image */
+  background: url("https://images.unsplash.com/photo-1734779336398-167995aeaf1c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80")
     no-repeat center center / cover;
   position: absolute;
   top: -30px;
@@ -28,5 +29,6 @@ body {
 
 .loading-text {
   font-size: 50px;
-  color: #a3b1c3;
+  /* Change Loading Text Color */
+  color: #403d47;
 }