extern/the-glorious-startpage
1
0
Fork 1
mirror of https://github.com/manilarome/the-glorious-startpage.git synced 2024-11-27 10:03:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

cleanup body background blurring

Browse Source
This commit is contained in:
Gerome Matilla 2020-06-04 08:53:55 +08:00
parent b9153cd875
commit a11a2acc8a
2 changed files with 29 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
css/body-background.css
View File

@ -9,15 +9,11 @@
margin: 0;
padding: 0;
overflow: hidden;
transition: all 3s;
color: var(--foreground);
}
.blurredBodyBackground {
.blurFiltered {
filter: blur(5px);
-webkit-filter: blur(5px);
transition: all 1s;
}
.unblurredBodyBackground {
transition: all 1s;
}

45
js/body-background-set.js
View File

@ -1,34 +1,43 @@
// High quality background, we'll lazy load this
var hqBG = document.createElement("img");
var backgroundBody = document.getElementById('bodyBackground')
// High quality background, we'll lazy load this
var hqBackground = document.createElement("img");
// Style body background
const styleBodyBackground = () => {
backgroundBody.style.backgroundSize = 'cover';
backgroundBody.style.backgroundRepeat = "no-repeat";
backgroundBody.style.backgroundPosition = "center";
backgroundBody.style.backgroundAttachment = "fixed";
const styleBodyBackground = (bgBodyStyle) => {
bgBodyStyle.backgroundSize = 'cover';
bgBodyStyle.backgroundRepeat = "no-repeat";
bgBodyStyle.backgroundPosition = "center";
bgBodyStyle.backgroundAttachment = "fixed";
}
const lazyLoadBackground = (fileName) => {
// Set a low quality background image
backgroundBody.style.background = "url('assets/backgrounds/" +
fileName + "-low" + ".webp')";
styleBodyBackground();
backgroundBody.className = "blurredBodyBackground";
// Shorten backgroundBody.style or alias it
var bgBodyStyle = backgroundBody.style;
// Set a low quality background image
bgBodyStyle.background = "url('assets/backgrounds/" +
fileName + "-low" + ".webp')";
styleBodyBackground(bgBodyStyle);
// Add a class to blur it
backgroundBody.classList.add("blurFiltered");
hqBackground.onload = () => {
hqBG.onload = function() {
// After downloading the HQ image, set it as bg
backgroundBody.style.background = "url("+ hqBG.src; + ")";
styleBodyBackground();
backgroundBody.className = "unblurredBodyBackground";
backgroundBody.style.background = "url("+ hqBackground.src; + ")";
styleBodyBackground(bgBodyStyle);
// Remove class to unblur
backgroundBody.classList.remove("blurFiltered");
}
// Add a delay when to fetch background
setTimeout(
function() {
hqBG.src = "assets/backgrounds/" +
() => {
hqBackground.src = "assets/backgrounds/" +
fileName + ".webp";
},
50