From 6021e3943be0c0088998077b8438d002be8207d4 Mon Sep 17 00:00:00 2001 From: couldntfindabetterusername Date: Sun, 20 Feb 2022 13:50:36 +0530 Subject: [PATCH] day 5 completed --- my code/05-blurry-loading/index.html | 23 +++++++++++++++++++ my code/05-blurry-loading/script.js | 14 ++++++++++++ my code/05-blurry-loading/style.css | 33 ++++++++++++++++++++++++++++ 3 files changed, 70 insertions(+) create mode 100644 my code/05-blurry-loading/index.html create mode 100644 my code/05-blurry-loading/script.js create mode 100644 my code/05-blurry-loading/style.css diff --git a/my code/05-blurry-loading/index.html b/my code/05-blurry-loading/index.html new file mode 100644 index 0000000..e6b2e2f --- /dev/null +++ b/my code/05-blurry-loading/index.html @@ -0,0 +1,23 @@ + + + + + + + + 05 blurry loading + + + + +
+
+ 0% +
+ + + + + + + \ No newline at end of file diff --git a/my code/05-blurry-loading/script.js b/my code/05-blurry-loading/script.js new file mode 100644 index 0000000..10d6b70 --- /dev/null +++ b/my code/05-blurry-loading/script.js @@ -0,0 +1,14 @@ +let percent = 0; +const span = document.getElementById("percent"); +const bg = document.getElementById("blurry-bg"); + +const loading = setInterval(() => { + span.innerHTML = percent.toString() + "%"; + bg.style.backdropFilter = "blur(" + ((100 - percent) / 5).toString() + "px)"; + span.style.opacity = ((100 - percent) / 100).toString(); + percent++; + + if (percent > 100) { + clearInterval(loading); + } +}, 20); diff --git a/my code/05-blurry-loading/style.css b/my code/05-blurry-loading/style.css new file mode 100644 index 0000000..26bd8e8 --- /dev/null +++ b/my code/05-blurry-loading/style.css @@ -0,0 +1,33 @@ +* { + margin: 0; + padding: 0; +} + +body { + overflow: hidden; +} + +main { + background: url("https://images.unsplash.com/photo-1576161787924-01bb08dad4a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2104&q=80") + center / cover; + width: 100vw; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} + +.blurry-bg { + width: 100vw; + height: 100vh; + backdrop-filter: blur(20px); + position: absolute; + top: 0; + left: 0; +} + +.percent { + color: #fff; + z-index: 2; + font-size: 40px; +}