From 1fd27123cb5898065a63230b02462ddd302414c5 Mon Sep 17 00:00:00 2001 From: Brad Traversy Date: Thu, 8 Oct 2020 09:42:08 -0400 Subject: [PATCH] Blurry loading --- blurry-loading/index.html | 15 +++++++++++++++ blurry-loading/script.js | 23 +++++++++++++++++++++++ blurry-loading/style.css | 32 ++++++++++++++++++++++++++++++++ 3 files changed, 70 insertions(+) create mode 100644 blurry-loading/index.html create mode 100644 blurry-loading/script.js create mode 100644 blurry-loading/style.css diff --git a/blurry-loading/index.html b/blurry-loading/index.html new file mode 100644 index 0000000..99ff943 --- /dev/null +++ b/blurry-loading/index.html @@ -0,0 +1,15 @@ + + + + + + + Blurry Loading + + +
+
0%
+ + + + diff --git a/blurry-loading/script.js b/blurry-loading/script.js new file mode 100644 index 0000000..7803e01 --- /dev/null +++ b/blurry-loading/script.js @@ -0,0 +1,23 @@ +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.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 +} diff --git a/blurry-loading/style.css b/blurry-loading/style.css new file mode 100644 index 0000000..621ed1d --- /dev/null +++ b/blurry-loading/style.css @@ -0,0 +1,32 @@ +@import url('https://fonts.googleapis.com/css?family=Ubuntu'); + +* { + box-sizing: border-box; +} + +body { + font-family: 'Ubuntu', sans-serif; + display: flex; + align-items: center; + justify-content: center; + height: 100vh; + overflow: hidden; + margin: 0; +} + +.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; + position: absolute; + top: -30px; + left: -30px; + width: calc(100vw + 60px); + height: calc(100vh + 60px); + z-index: -1; + filter: blur(0px); +} + +.loading-text { + font-size: 50px; + color: #fff; +}