msb-public
/
50projects50days
mirror of https://github.com/bradtraversy/50projects50days
1
0
Code Issues Projects Releases Wiki Activity

Merge 3d33f1caf9 into cd228d507d

Browse Source
pull/105/merge
fikryakrom 4 years ago committed by GitHub
parent cd228d507d 3d33f1caf9
commit a7e98f6b91
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 28 additions and 28 deletions
Show Stats Download Patch File Download Diff File

3
.vscode/settings.json vendored
Unescape View File

@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}

26
blurry-loading/index.html
Unescape View File

@ -1,15 +1,15 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="style.css" /> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blurry Loading</title> <title>Blurry Loading</title>
</head> <link rel="stylesheet" href="style.css">
<body> </head>
<section class="bg"></section> <body>
<div class="loading-text">0%</div> <section class="bg"></section>
<div class="loading-text">0%</div>
<script src="script.js"></script> <script src="script.js"></script>
</body> </body>
</html> </html>

22
blurry-loading/script.js
Unescape View File

@ -1,23 +1,21 @@
const loadText = document.querySelector('.loading-text') const loadText = document.querySelector('.loading-text');
const bg = document.querySelector('.bg') const bg = document.querySelector('.bg');
let load = 0 let load = 0;
let int = setInterval(blurring, 30);
let int = setInterval(blurring, 30)
function blurring() { function blurring() {
load++ load++;
if (load > 99) { if(load > 99) {
clearInterval(int) clearInterval(int);
} }
loadText.innerText = `${load}%`;
loadText.innerText = `${load}%` loadText.style.opacity = scale(load, 0, 100, 1, 0);
loadText.style.opacity = scale(load, 0, 100, 1, 0)
bg.style.filter = `blur(${scale(load, 0, 100, 30, 0)}px)` 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 // 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) => { 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 return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min
} }

5
blurry-loading/style.css
Unescape View File

@ -15,8 +15,7 @@ body {
} }
.bg { .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') 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;
no-repeat center center/cover;
position: absolute; position: absolute;
top: -30px; top: -30px;
left: -30px; left: -30px;
@ -29,4 +28,4 @@ body {
.loading-text { .loading-text {
font-size: 50px; font-size: 50px;
color: #fff; color: #fff;
} }
Write Preview
Loading…
Cancel
Save