extern/the-glorious-startpage
1
0
Fork 1
mirror of https://github.com/manilarome/the-glorious-startpage.git synced 2024-12-26 16:08:59 +01:00
Code Issues Packages Projects Releases Wiki Activity

rename/cleanup body background

Browse Source
This commit is contained in:
Gerome Matilla 2020-06-04 07:36:54 +08:00
parent 9415244927
commit 896c695a87
4 changed files with 11 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
css/set-body-background.css → css/body-background.css
View File

@ -1,6 +1,6 @@
/*Filter for body's lazy loaded background */
#backgroundBody {
#bodyBackground {
position: absolute;
top: 0;
left: 0;
@ -12,12 +12,12 @@
color: var(--foreground);
}
.blurBody {
.blurredBodyBackground {
filter: blur(5px);
-webkit-filter: blur(5px);
transition: all 1s;
}
.noBlurBody {
.unblurredBodyBackground {
transition: all 1s;
}

2
css/style.css
View File

@ -1,5 +1,5 @@
@import url('normalize.css');
@import url('set-body-background.css');
@import url('body-background.css');
:root {
/* Colors */

4
index.html
View File

@ -34,10 +34,10 @@
<body>
<!-- The place where we set the background/image -->
<div id="backgroundBody"></div>
<div id="bodyBackground"></div>
<script src="js/set-body-background.js"></script>
<script src="js/body-background-set.js"></script>
</body>
</html>

8
js/set-body-background.js → js/body-background-set.js
View File

@ -1,7 +1,8 @@
// High quality background, we'll lazy load this
var hqBG = document.createElement("img");
var backgroundImage = document.getElementById('backgroundBody')
var backgroundBody = document.getElementById('bodyBackground')
// Style body background
const styleBodyBackground = () => {
backgroundBody.style.backgroundSize = 'cover';
backgroundBody.style.backgroundRepeat = "no-repeat";
@ -15,13 +16,13 @@ const lazyLoadBackground = (fileName) => {
backgroundBody.style.background = "url('assets/backgrounds/" +
fileName + "-low" + ".webp')";
styleBodyBackground();
backgroundBody.className = "blurBody";
backgroundBody.className = "blurredBodyBackground";
hqBG.onload = function() {
// After downloading the HQ image, set it as bg
backgroundBody.style.background = "url("+ hqBG.src; + ")";
styleBodyBackground();
backgroundBody.className = "noBlurBody";
backgroundBody.className = "unblurredBodyBackground";
}
// Add a delay when to fetch background
@ -49,4 +50,5 @@ const initLazyLoad = () => {
}
}
// Initialize
window.onload = initLazyLoad();