diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/blurry-loading/index.html b/blurry-loading/index.html index 99ff943..7f2d80f 100644 --- a/blurry-loading/index.html +++ b/blurry-loading/index.html @@ -1,15 +1,15 @@ - - - - - Blurry Loading - - -
-
0%
- - - - + + + + + Blurry Loading + + + +
+
0%
+ + + \ No newline at end of file diff --git a/blurry-loading/script.js b/blurry-loading/script.js index 7803e01..c45ad0e 100644 --- a/blurry-loading/script.js +++ b/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/blurry-loading/style.css index 621ed1d..0287d6b 100644 --- a/blurry-loading/style.css +++ b/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