Add files via upload

CodingBDX · web-flow · commit 26041f371710 · 2022-01-29T17:15:52.000+01:00
diff --git a/prototype/blurringpage/index.html b/prototype/blurringpage/index.html
@@ -1 +1,20 @@
+<!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>blur page</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <section class="bg">
+
+    </section>
+    <div class="loading-text">0%</div>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/prototype/blurringpage/script.js b/prototype/blurringpage/script.js
@@ -0,0 +1,22 @@
+const loadText = document.querySelector('.loading-text')
+const bg = document.querySelector('.bg')
+
+
+let load = 0
+let int = setInterval(blurring, 30)
+
+function blurring() {
+    load++
+
+    if (load > 99) {
+        clearInterval(int)
+    }
+    loadText.innerHTML = `${load}%`
+    loadText.style.opacity = scale(load, 0, 100, 1, 0)
+    bg.style.filter = `blur(${scale(load, 0, 100, 30, 0)}px)`
+}
+
+
+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
+}
diff --git a/prototype/blurringpage/style.css b/prototype/blurringpage/style.css
@@ -0,0 +1,26 @@
+
+body {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    margin: 0;
+
+}
+
+.bg {
+    background: url('https://images.unsplash.com/photo-1511884642898-4c92249e20b6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80') no-repeat center center/cover;
+position: absolute;
+top: -30px;
+left: -30px;
+width: calc(100vw + 60px);
+height: calc(100vh + 60px);
+z-index: -1;
+filter: blur(0px);
+}
+
+.loading-text {
+    font-size: 65px;
+    color: white;
+}
+
