i

i1li · Nov 27, 2024 · c74423c · c74423c
1 parent eadd9f0
commit c74423c
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 63 deletions.
diff --git a/dist/bundle-2d128.js b/dist/bundle-2d128.js
diff --git a/dist/bundle-2d128.css → dist/bundle-ba031.css b/dist/bundle-2d128.css → dist/bundle-ba031.css
diff --git a/dist/bundle-ba031.js b/dist/bundle-ba031.js
diff --git a/dist/index.html b/dist/index.html
diff --git a/src/css/background.css b/src/css/background.css
@@ -1,82 +1,55 @@
-#bg-wrapper {position: sticky;
-    top:0;
-    width: 100%;
-    height: 100vh;
-    margin-top:-100vh;
+#bg-wrapper {
     background-color: rgb(222, 222, 222);
     background-blend-mode: color-burn;
-    background-attachment: fixed;
-    border-radius:0;}
-#bg-wrapper.dark-mode {position: sticky;
-    top:0;
-    width: 100%;
-    height: 100vh;
-    margin-top:-100vh;
+}
+#bg-wrapper.dark-mode {
     background-color: rgb(0, 0, 0);
     background-blend-mode: color-dodge;
-    border-radius:0;}
-#bg-img {position: relative;
-    top:0;
-    width: 100%;
-    height: 100vh;
+}
+#bg-img {
     background-blend-mode: overlay;
     background-image: url("../img/bg.png");
     background-attachment: fixed;
-    margin-top:-100vh;
-    border-radius:0;}
-#bg-img.dark-mode {position: relative;
-    top:0;
-    width: 100%;
-    height: 100vh;
+}
+#bg-img.dark-mode {
     background-blend-mode: difference;
     background-image: url("../img/bginvert.png");
     background-attachment: fixed;
-    margin-top:-100vh;
-    border-radius:0;}
-#bg-wrapper2 {position: relative;
-    top:0;
-    width: 100%;
-    height: 100vh;
+}
+#bg-wrapper2 {
     background-blend-mode: color-burn;
     backdrop-filter: contrast(155%) saturate(250%);
-    margin-top:-100vh;
     background: linear-gradient(to bottom, 
     rgba(128, 128, 128, .5) 0%,
     rgba(128, 128, 128, .05) 50%,
     rgba(128, 128, 128, .5) 100%);
-    border-radius:0;}
-#bg-wrapper3 {position: relative;
+}
+#bg-wrapper3 {
     opacity: .5;
-    top:0;
-    width: 100%;
-    height: 100vh;
     background-blend-mode: saturation;
     backdrop-filter: contrast(150%) saturate(350%);
-    margin-top:-100vh;
     background: linear-gradient(to right, 
     rgba(128, 128, 128, .5) 0%,
     rgba(128, 128, 128, .3) 15%,
     rgba(128, 128, 128, .05) 50%,
     rgba(128, 128, 128, .3) 85%,
     rgba(128, 128, 128, .5) 100%);
-    border-radius:0;}
-#bg {position: absolute;
-    top: 0;
-    left: 0;
+}
+#bg {
     opacity: .33;
-    border-radius:0;
     mix-blend-mode: color;
 }
-#shift-layer1, #shift-layer2 {
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    top: 0;
-    left: 0;
-}
 #shift-layer1 {
     mix-blend-mode: difference;
 }
 #shift-layer2 {
     mix-blend-mode: overlay;
 }
+#bg-wrapper, #bg-wrapper.dark-mode, #bg-img.dark-mode, #bg-img, #bg-wrapper2, #bg-wrapper3, #bg, #shift-layer1, #shift-layer2 {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    border-radius:0;
+}
diff --git a/src/index.html b/src/index.html
@@ -7,7 +7,7 @@
 <link rel="stylesheet" type="text/css" href="/yt/youtube-embed.css">
 </head><body>
 <div id="bg-wrapper"><div id="bg-img"><div id="bg-wrapper2"><div id="bg-wrapper3"></div></div></div></div>
-<div id="bg"><div id="shift-layer1"></div><div id="shift-layer2"></div></div>
+<div id="bg"><div id="shift-layer1"><div id="shift-layer2"></div></div></div>
 <span id="toTop" onclick="goToTop()" title="Go to top"><img alt="Go to top" class="to-top" decoding="async" src="/img/top.png"></span>
 <div id="fullScreenOverlay" onclick="closeOverlay()"><span class="close-button" onclick="closeOverlay()">&times;</span><img id="overlayImage"></div>
 <div id="searchOverlay" class="search-overlay">

diff --git a/src/js/background.js b/src/js/background.js
@@ -31,7 +31,7 @@ function getRandomInRange(min, max, modifier = 1, element) {
   }
 }
 function getRandomTransitionDuration(element) {
-  const randomValue = getRandomInRange(8000, 33000, 1, element);
+  const randomValue = getRandomInRange(7000, 21000, 1, element);
   return Math.round(randomValue); 
 }
 function getRandomHueShift(element) {
@@ -52,15 +52,15 @@ function getRandomOpacityValue2(element) {
 }
 function getRandomGradientSteps(element) {
   const { currentLayer } = getShiftLayerInfo(element);
-  return currentLayer === 2 ? 7 * Math.ceil(Math.random() * 3) : randomlyModifyValue(Math.ceil(Math.random() * 5) + 2);
+  return currentLayer === 1 ? 7 * Math.ceil(Math.random() * 7) : randomlyModifyValue(Math.ceil(Math.random() * 12) + 2);
 }
 function createLayerState(element) {
   const { currentLayer } = getShiftLayerInfo(element);
   return {
     transitionCurrentTime: 0,
     transitionProgress: 0,
-    transitionDuration: currentLayer === 2 ? 5000 : 8000,
-    currentGradientSteps: currentLayer === 2 ? 7 : 14,
+    transitionDuration: currentLayer === 1 ? 8000 : 5000,
+    currentGradientSteps: getRandomGradientSteps(element),
     currentContrast: 100,
     currentBrightness: 100,
     currentSaturation: 100,

diff --git a/src/js/color-change.js b/src/js/color-change.js
@@ -2,7 +2,7 @@ if (!isMobile) {
 const hoverShift = document.querySelectorAll('button, a, .article-nav-bottom, footer');
 const alwaysShift = document.querySelectorAll('header, #site-title, #toolbar, nav .col a, .article-header, .article-title, .section-nav, .section-nav .col a, footer');
 function getRandomDegree() {return Math.random() < 0.5 ? Math.floor(Math.random() * -270) - 45 : Math.floor(Math.random() * 270) + 46;}
-function getRandomInterval() {return Math.floor(Math.random() * 5000) + 3000;}
+function getRandomInterval() {return Math.floor(Math.random() * 14000) + 7000;}
 function isElementInViewport(el) {
   const rect = el.getBoundingClientRect();
   const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
@@ -42,7 +42,7 @@ function startShift(element, interval, isHover = false) {
     if (isWindowActive && isElementInViewport(element)) {
       const deltaTime = time - lastTime;
       lastTime = time;
-      progress += (deltaTime / interval) * (Math.random() * .55);
+      progress += (deltaTime / interval);
       if (progress >= 1) {
         targetDegree = getRandomDegree();
         targetSaturation = Math.random() * (125 - 90) + 90;
@@ -51,10 +51,10 @@ function startShift(element, interval, isHover = false) {
         progress = 0;
       }
       const t = () => metaRecursiveEaseNoise(progress);
-      currentDegree += Math.round((targetDegree - currentDegree) * t() * (Math.random() * .015)) / 10;
-      currentSaturation += Math.round((targetSaturation - currentSaturation) * t() * (Math.random() * .15)) / 10;
-      currentContrast += Math.round((targetContrast - currentContrast) * t() * (Math.random() * .15)) / 10;
-      currentBrightness += Math.round((targetBrightness - currentBrightness) * t() * (Math.random() * .15)) / 10;
+      currentDegree += Math.round((targetDegree - currentDegree) * t() * (Math.random() * .25)) / 10;
+      currentSaturation += Math.round((targetSaturation - currentSaturation) * t() * (Math.random())) / 10;
+      currentContrast += Math.round((targetContrast - currentContrast) * t() * (Math.random())) / 10;
+      currentBrightness += Math.round((targetBrightness - currentBrightness) * t() * (Math.random())) / 10;
       updateFilter();
     }
     if (isRunning) {