extern/the-glorious-startpage
1
0
Fork 1
mirror of https://github.com/manilarome/the-glorious-startpage.git synced 2024-11-30 11:33:39 +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; margin: 0;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
transition: all 3s;
color: var(--foreground); color: var(--foreground);
} }
.blurredBodyBackground { .blurFiltered {
filter: blur(5px); filter: blur(5px);
-webkit-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') var backgroundBody = document.getElementById('bodyBackground')
// High quality background, we'll lazy load this
var hqBackground = document.createElement("img");
// Style body background // Style body background
const styleBodyBackground = () => { const styleBodyBackground = (bgBodyStyle) => {
backgroundBody.style.backgroundSize = 'cover'; bgBodyStyle.backgroundSize = 'cover';
backgroundBody.style.backgroundRepeat = "no-repeat"; bgBodyStyle.backgroundRepeat = "no-repeat";
backgroundBody.style.backgroundPosition = "center"; bgBodyStyle.backgroundPosition = "center";
backgroundBody.style.backgroundAttachment = "fixed"; bgBodyStyle.backgroundAttachment = "fixed";
} }
const lazyLoadBackground = (fileName) => { const lazyLoadBackground = (fileName) => {
// Set a low quality background image // Shorten backgroundBody.style or alias it
backgroundBody.style.background = "url('assets/backgrounds/" + var bgBodyStyle = backgroundBody.style;
fileName + "-low" + ".webp')";
styleBodyBackground(); // Set a low quality background image
backgroundBody.className = "blurredBodyBackground"; 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 // After downloading the HQ image, set it as bg
backgroundBody.style.background = "url("+ hqBG.src; + ")"; backgroundBody.style.background = "url("+ hqBackground.src; + ")";
styleBodyBackground(); styleBodyBackground(bgBodyStyle);
backgroundBody.className = "unblurredBodyBackground";
// Remove class to unblur
backgroundBody.classList.remove("blurFiltered");
} }
// Add a delay when to fetch background // Add a delay when to fetch background
setTimeout( setTimeout(
function() { () => {
hqBG.src = "assets/backgrounds/" + hqBackground.src = "assets/backgrounds/" +
fileName + ".webp"; fileName + ".webp";
}, },
50 50