extern/the-glorious-startpage
1
0
Fork 1
mirror of https://github.com/manilarome/the-glorious-startpage.git synced 2025-01-14 01:21:15 +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 */ /*Filter for body's lazy loaded background */
#backgroundBody { #bodyBackground {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -12,12 +12,12 @@
color: var(--foreground); color: var(--foreground);
} }
.blurBody { .blurredBodyBackground {
filter: blur(5px); filter: blur(5px);
-webkit-filter: blur(5px); -webkit-filter: blur(5px);
transition: all 1s; transition: all 1s;
} }
.noBlurBody { .unblurredBodyBackground {
transition: all 1s; transition: all 1s;
} }

2
css/style.css
View File

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

4
index.html
View File

@ -34,10 +34,10 @@
<body> <body>
<!-- The place where we set the background/image --> <!-- 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> </body>
</html> </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 // High quality background, we'll lazy load this
var hqBG = document.createElement("img"); var hqBG = document.createElement("img");
var backgroundImage = document.getElementById('backgroundBody') var backgroundBody = document.getElementById('bodyBackground')
// Style body background
const styleBodyBackground = () => { const styleBodyBackground = () => {
backgroundBody.style.backgroundSize = 'cover'; backgroundBody.style.backgroundSize = 'cover';
backgroundBody.style.backgroundRepeat = "no-repeat"; backgroundBody.style.backgroundRepeat = "no-repeat";
@ -15,13 +16,13 @@ const lazyLoadBackground = (fileName) => {
backgroundBody.style.background = "url('assets/backgrounds/" + backgroundBody.style.background = "url('assets/backgrounds/" +
fileName + "-low" + ".webp')"; fileName + "-low" + ".webp')";
styleBodyBackground(); styleBodyBackground();
backgroundBody.className = "blurBody"; backgroundBody.className = "blurredBodyBackground";
hqBG.onload = function() { 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("+ hqBG.src; + ")";
styleBodyBackground(); styleBodyBackground();
backgroundBody.className = "noBlurBody"; backgroundBody.className = "unblurredBodyBackground";
} }
// Add a delay when to fetch background // Add a delay when to fetch background
@ -49,4 +50,5 @@ const initLazyLoad = () => {
} }
} }
// Initialize
window.onload = initLazyLoad(); window.onload = initLazyLoad();