From 896c695a8770ddacee12dd2e5802c6817b63a9c8 Mon Sep 17 00:00:00 2001 From: Gerome Matilla Date: Thu, 4 Jun 2020 07:36:54 +0800 Subject: [PATCH] rename/cleanup body background --- css/{set-body-background.css => body-background.css} | 6 +++--- css/style.css | 2 +- index.html | 4 ++-- js/{set-body-background.js => body-background-set.js} | 8 +++++--- 4 files changed, 11 insertions(+), 9 deletions(-) rename css/{set-body-background.css => body-background.css} (80%) rename js/{set-body-background.js => body-background-set.js} (84%) diff --git a/css/set-body-background.css b/css/body-background.css similarity index 80% rename from css/set-body-background.css rename to css/body-background.css index 1ad42cd..3588d18 100644 --- a/css/set-body-background.css +++ b/css/body-background.css @@ -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; } \ No newline at end of file diff --git a/css/style.css b/css/style.css index 0170b7e..be40739 100644 --- a/css/style.css +++ b/css/style.css @@ -1,5 +1,5 @@ @import url('normalize.css'); -@import url('set-body-background.css'); +@import url('body-background.css'); :root { /* Colors */ diff --git a/index.html b/index.html index 51b6789..8449b82 100644 --- a/index.html +++ b/index.html @@ -34,10 +34,10 @@ -
+
- + \ No newline at end of file diff --git a/js/set-body-background.js b/js/body-background-set.js similarity index 84% rename from js/set-body-background.js rename to js/body-background-set.js index 9029163..6b475b4 100644 --- a/js/set-body-background.js +++ b/js/body-background-set.js @@ -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(); \ No newline at end of file