creating blurry background from scratch

4 years ago · 793785a5b0
parent cd228d507d
commit 793785a5b0
4 changed files with 27 additions and 30 deletions
--- a/1-blurry-loading/index.html
+++ b/1-blurry-loading/index.html
@ -0,0 +1,15 @@
+<!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>Blurry Loading</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>
--- a/1-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
-}
+}
--- a/1-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;
-}
+}
--- a/blurry-loading/index.html
+++ b/blurry-loading/index.html
@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="style.css" />
-    <title>Blurry Loading</title>
-  </head>
-  <body>
-    <section class="bg"></section>
-    <div class="loading-text">0%</div>
-
-    <script src="script.js"></script>
-  </body>
-</html>