diff --git a/1-blurry-loading/index.html b/1-blurry-loading/index.html
new file mode 100644
index 0000000..7f2d80f
--- /dev/null
+++ b/1-blurry-loading/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+ Blurry Loading
+
+
+
+
+ 0%
+
+
+
\ No newline at end of file
diff --git a/blurry-loading/script.js b/1-blurry-loading/script.js
similarity index 54%
rename from blurry-loading/script.js
rename to 1-blurry-loading/script.js
index 7803e01..c45ad0e 100644
--- a/blurry-loading/script.js
+++ b/1-blurry-loading/script.js
@@ -1,23 +1,21 @@
-const loadText = document.querySelector('.loading-text')
-const bg = document.querySelector('.bg')
+const loadText = document.querySelector('.loading-text');
+const bg = document.querySelector('.bg');
-let load = 0
-
-let int = setInterval(blurring, 30)
+let load = 0;
+let int = setInterval(blurring, 30);
function blurring() {
- load++
+ load++;
- if (load > 99) {
- clearInterval(int)
+ if(load > 99) {
+ clearInterval(int);
}
-
- loadText.innerText = `${load}%`
- loadText.style.opacity = scale(load, 0, 100, 1, 0)
+ 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
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
-}
+}
\ No newline at end of file
diff --git a/blurry-loading/style.css b/1-blurry-loading/style.css
similarity index 70%
rename from blurry-loading/style.css
rename to 1-blurry-loading/style.css
index 621ed1d..0287d6b 100644
--- a/blurry-loading/style.css
+++ b/1-blurry-loading/style.css
@@ -15,8 +15,7 @@ body {
}
.bg {
- 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;
+ background: url('https://images.pexels.com/photos/15286/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260') no-repeat center center/cover;
position: absolute;
top: -30px;
left: -30px;
@@ -29,4 +28,4 @@ body {
.loading-text {
font-size: 50px;
color: #fff;
-}
+}
\ No newline at end of file
diff --git a/blurry-loading/index.html b/blurry-loading/index.html
deleted file mode 100644
index 99ff943..0000000
--- a/blurry-loading/index.html
+++ /dev/null
@@ -1,15 +0,0 @@
-
-
-
-
-
-
- Blurry Loading
-
-
-
- 0%
-
-
-
-