From 793785a5b05be714539ea2e7be2c850b6d18b672 Mon Sep 17 00:00:00 2001 From: fikryakrom Date: Tue, 1 Mar 2022 15:26:07 +0700 Subject: [PATCH] creating blurry background from scratch --- 1-blurry-loading/index.html | 15 +++++++++++++ .../script.js | 22 +++++++++---------- .../style.css | 5 ++--- blurry-loading/index.html | 15 ------------- 4 files changed, 27 insertions(+), 30 deletions(-) create mode 100644 1-blurry-loading/index.html rename {blurry-loading => 1-blurry-loading}/script.js (54%) rename {blurry-loading => 1-blurry-loading}/style.css (70%) delete mode 100644 blurry-loading/index.html 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%
- - - -