optimize background image by using video

NguyenfromVN · Dec 11, 2023 · bf42bc4 · bf42bc4
1 parent 881e033
commit bf42bc4
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 10 deletions.
diff --git a/images/neon-background.gif b/images/neon-background.gif
diff --git a/images/neon-background.webm b/images/neon-background.webm
diff --git a/index.css b/index.css
@@ -8,18 +8,17 @@ html,
 body {
   height: 100%;
   overflow: hidden;
+  position: relative;
 }
 
 .no-display {
   display: none;
 }
 
 /* BACKGROUND */
-body {
-  background-image: url("./images/neon-background.gif#randy");
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
+#background-image {
+  position: absolute;
+  z-index: -1;
 }
 
 /* MASK */

diff --git a/index.html b/index.html
@@ -36,6 +36,7 @@
 </head>
 
 <body>
+  <video id="background-image" muted loop autoplay></video>
   <div id="app">
     <div id="widgets">
       <div id="prevent-highlight"></div>

diff --git a/index.js b/index.js
@@ -118,7 +118,7 @@ const dotGameLinks = [
     linkElement: document.getElementById('a-whatsapp'),
   },
 ];
-let decoPatternUrl = 'deco';
+let decoPatternUrl = '';
 
 // UTILS
 function square(number) {
@@ -523,15 +523,25 @@ const getResourceBlobURL = (url) => new Promise((resolve) => {
 
 async function setUpStaticResources() {
   const promises = [];
-  [...dotGameLinks, { imgSrc: 'deco' }].forEach(async (item) => {
-    const promise = getResourceBlobURL(`./images/${item.imgSrc}.png`);
+  [...dotGameLinks.map((item) => {
+    item.type = 'png';
+    return item;
+  }),
+  { imgSrc: 'deco', type: 'png' },
+  { imgSrc: 'neon-background', type: 'webm' }].forEach(async (item) => {
+    const promise = getResourceBlobURL(`./images/${item.imgSrc}.${item.type}`);
     promises.push(promise);
     const blobUrl = await promise;
-    const imgTag = document.querySelector(`.for-preloading-purpose-${item.imgSrc}`);
-    imgTag.src = blobUrl;
+    const element = document.querySelector(`.for-preloading-purpose-${item.imgSrc}`) || {};
+    element.src = blobUrl;
     if (item.imgSrc === 'deco') {
       decoPatternUrl = blobUrl;
     }
+    if (item.imgSrc === 'neon-background') {
+      const videoElement = document.getElementById('background-image');
+      videoElement.src = blobUrl;
+      videoElement.play();
+    }
     item.imgSrc = blobUrl;
   });
   return Promise.all(promises);
@@ -1218,6 +1228,35 @@ function startClock() {
   tick();
 }
 
+function setUpBackground() {
+  const element = document.getElementById('background-image');
+  element.play();
+  element.style.top = '0px';
+  element.style.left = '0px';
+  const backgroundWidth = element.offsetWidth;
+  const backgroundHeight = element.offsetHeight;
+  const backgroundRatio = backgroundWidth / backgroundHeight;
+  const appWidth = AppContainer.offsetWidth;
+  const appHeight = AppContainer.offsetHeight;
+  const appRatio = AppContainer.offsetWidth / AppContainer.offsetHeight;
+  if (backgroundRatio === appRatio) {
+    element.style.width = appWidth;
+    element.style.height = appHeight;
+  } else {
+    const scaleRatio = backgroundRatio < appRatio
+      ? appWidth / backgroundWidth : appHeight / backgroundHeight;
+    const newWidth = backgroundWidth * scaleRatio;
+    const newHeight = backgroundHeight * scaleRatio;
+    element.style.width = `${newWidth}px`;
+    element.style.height = `${newHeight}px`;
+    if (backgroundRatio < appRatio) {
+      element.style.top = `${(appHeight - newHeight) / 2}px`;
+    } else {
+      element.style.left = `${(appWidth - newWidth) / 2}px`;
+    }
+  }
+}
+
 // INIT FUNCTION
 async function init() {
   const appWidth = AppContainer.offsetWidth;
@@ -1240,6 +1279,7 @@ async function init() {
   alertText.style.transition = 'opacity 0.5s';
   const loadingScreen = document.getElementById('loading');
   loadingScreen.addEventListener('click', async () => {
+    setUpBackground();
     prepareMusic();
     await requireGeoInfo();
     startWeatherWidget();