day 5 completed

4 years ago · 6021e3943b
parent 44fbec71ca
commit 6021e3943b
3 changed files with 70 additions and 0 deletions
--- a/code/05-blurry-loading/index.html
+++ b/code/05-blurry-loading/index.html
@ -0,0 +1,23 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05 blurry loading</title>
    <link rel="stylesheet" href="style.css">
 </head>
 <body>
    <main>
        <section class="blurry-bg" id="blurry-bg"></section>
        <span class="percent" id="percent">0%</span>
    </main>
    <script src="script.js"></script>
 </body>
 </html>
--- a/code/05-blurry-loading/script.js
+++ b/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);
--- a/code/05-blurry-loading/style.css
+++ b/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;
 }