i

i1li · Aug 15, 2024 · e0aedd5 · e0aedd5
1 parent 0a2b273
commit e0aedd5
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 75 deletions.
diff --git a/css/background.css b/css/background.css
@@ -3,7 +3,7 @@
     width: 100%;
     height: 100vh;
     margin-top:-100vh;
-    background-color: white;
+    background-color: rgb(222, 222, 222);
     background-image: url("/img/bg.png");
     background-blend-mode: luminosity;
     background-attachment: fixed;
@@ -13,7 +13,7 @@
     width: 100%;
     height: 100vh;
     margin-top:-100vh;
-    background-color: black;
+    background-color: rgb(0, 0, 0);
     background-image: url("/img/bginvert.png");
     background-blend-mode: difference;
     background-attachment: fixed;

diff --git a/css/style.css b/css/style.css
@@ -322,7 +322,8 @@ img {opacity: 1; transition: all .7s ease-in-out; border-radius:0;} img:hover {o
     width: 100%;
     height: 100%;
     overflow: auto;
-    background-color: rgba(11, 11, 11, 0.92);
+    background-color: rgba(33, 33, 69, 0.7);
+    backdrop-filter: grayscale(60%) blur(.1rem);
     text-align: center;
     box-sizing: border-box;
     border-radius: 0;}
@@ -335,7 +336,8 @@ img {opacity: 1; transition: all .7s ease-in-out; border-radius:0;} img:hover {o
 #close-button {position: absolute;
     top: .5em;
     right: 1em;
-    color: rgba(129, 129, 129, 0.5);
+    color: rgba(192, 0, 0, .5);
+    text-shadow: 1px 1px 3px rgb(255, 0, 0, .5), 0 0 1em rgb(0, 255, 0), 0 0 0.2em blue;
     font-size: 3em;
     font-weight: bold;
     z-index: 1;}

diff --git a/js/background.js b/js/background.js
@@ -1,41 +1,39 @@
 // Only run this code on non-mobile devices
 if (detectMobile()) {
-    const box = document.getElementById("box");
-    const overlay = document.getElementById("overlay");
-    let hueIndex = 0;
-    let hueIncrement = 1;
-    let intervalCount = 0;
-    let intervalsTillNextChange = Math.floor(Math.random() * 22) + 11; 
-    const HUE_STEP = 360 / 7;
-    function getAdjustedHue(index, step) {
-        return (index + step * HUE_STEP + 360) % 360;
+const box = document.getElementById("box");
+const overlay = document.getElementById("overlay");
+let hueIndex = 0;
+let hueIncrement = 1;
+let intervalCount = 0;
+let intervalsTillNextChange = Math.floor(Math.random() * 22) + 11; 
+const HUE_STEP = 360 / 7;
+function getAdjustedHue(index, step) {return (index + step * HUE_STEP + 360) % 360;}
+function setGradient(element, index) {
+    const width = element.offsetWidth;
+    const height = element.offsetHeight;
+    const diagonal = Math.sqrt(width * width + height * height);
+    const percentage = (diagonal / (Math.max(width, height) * Math.sqrt(2))) * 100;
+    let gradients = [];
+    for (let i = 0; i < 7; i++) {
+        const angle = i * (360 / 7);
+        const x = 50 + 50 * Math.cos(angle * Math.PI / 180);
+        const y = 50 + 50 * Math.sin(angle * Math.PI / 180);
+        gradients.push(`radial-gradient(ellipse farthest-corner at ${x}% ${y}%, hsl(${getAdjustedHue(index, i)}, 100%, 50%), transparent ${percentage}%)`);
     }
-    function setGradient(element, index) {
-        const width = element.offsetWidth;
-        const height = element.offsetHeight;
-        const diagonal = Math.sqrt(width * width + height * height);
-        const percentage = (diagonal / (Math.max(width, height) * Math.sqrt(2))) * 100;
-        let gradients = [];
-        for (let i = 0; i < 7; i++) {
-            const angle = i * (360 / 7);
-            const x = 50 + 50 * Math.cos(angle * Math.PI / 180);
-            const y = 50 + 50 * Math.sin(angle * Math.PI / 180);
-            gradients.push(`radial-gradient(ellipse farthest-corner at ${x}% ${y}%, hsl(${getAdjustedHue(index, i)}, 100%, 50%), transparent ${percentage}%)`);
-        }
-        element.style.backgroundImage = gradients.join(', ');
-    }
-    function updateColors() {
-        hueIndex = (hueIndex + hueIncrement) % 360;
-        intervalCount++;
-        if (intervalCount >= intervalsTillNextChange) {
-            hueIncrement = 0.5 + Math.random() * 1;
-            intervalCount = 0;
-            intervalsTillNextChange = Math.floor(Math.random() * 9) + 3; 
-        }
-        setGradient(box, hueIndex);
-        setGradient(overlay, 360 - hueIndex); 
+    element.style.backgroundImage = gradients.join(', ');
+}
+function updateColors() {
+    hueIndex = (hueIndex + hueIncrement) % 360;
+    intervalCount++;
+    if (intervalCount >= intervalsTillNextChange) {
+        hueIncrement = 0.5 + Math.random() * 1;
+        intervalCount = 0;
+        intervalsTillNextChange = Math.floor(Math.random() * 9) + 3; 
     }
-    setGradient(box, 0);
-    setGradient(overlay, 360);
-    setInterval(updateColors, 33);
+    setGradient(box, hueIndex);
+    setGradient(overlay, 360 - hueIndex); 
+}
+setGradient(box, 0);
+setGradient(overlay, 360);
+setInterval(updateColors, 33);
 }
diff --git a/js/color-change.js b/js/color-change.js
@@ -1,58 +1,70 @@
 // Only run this code on non-mobile devices
 if (detectMobile()) {
-// Random Color on Hover, Click, or Touch of Links, Buttons + other elements
 const hoverShift = document.querySelectorAll('button, a, a.dark-mode, .article-header-wrapper, footer, .article-nav-bottom, #site-nav a, .section-nav a');
-// Shift colors of elements in 'alwaysShift' at randomly varying rate, regardless of hover.
 const alwaysShift = document.querySelectorAll('header, #site-nav .col, .section-nav .col, .article-header, footer, .article-title, #site-title, #light-dark-zoom');
-function startAlwaysShift(element, interval) {
-  let randomDegree = Math.random() < 0.5 ? Math.floor(Math.random() * -270) - 45 : Math.floor(Math.random() * 270) + 46;
-  let randomSaturation = Math.random() * (125 - 90) + 90;
-  let randomContrast = Math.random() * (170 - 80) + 80;
-  let randomBrightness = Math.random() * (135 - 85) + 85;
+function getRandomDegree() {return Math.random() < 0.5 ? Math.floor(Math.random() * -270) - 45 : Math.floor(Math.random() * 270) + 46;}
+function getNewIntervalsTillNextChange() {return Math.floor(Math.random() * 22) + 11;}
+function getRandomInterval() {return 111 + Math.floor(Math.random() * 1000);}
+function startShift(element, interval, isHover = false) {
+  let currentDegree = getRandomDegree();
+  let targetDegree = currentDegree;
+  let currentSaturation = 100;
+  let targetSaturation = 100;
+  let currentContrast = 100;
+  let targetContrast = 100;
+  let currentBrightness = 100;
+  let targetBrightness = 100;
+  let intervalCount = 0;
+  let intervalsTillNextChange = getNewIntervalsTillNextChange();
+  function updateFilter() {
+    element.style.filter = `
+      hue-rotate(${currentDegree}deg)
+      saturate(${currentSaturation}%)
+      contrast(${currentContrast}%)
+      brightness(${currentBrightness}%)
+      ${isHover ? 'drop-shadow(0 0 1em rgba(255, 255, 255, 0.5))' : ''}
+    `;
+  }
+  updateFilter();
   return setInterval(() => {
-    randomDegree += element.shiftIncrement;
-    element.style.filter = `hue-rotate(${randomDegree}deg) saturate(${randomSaturation}%) contrast(${randomContrast}%) brightness(${randomBrightness}%)`;
-  }, interval);
-}
-function startHoverShift(element, interval = 100) {
-  let randomDegree = Math.random() < 0.5 ? Math.floor(Math.random() * -270) - 45 : Math.floor(Math.random() * 270) + 46;
-  let randomSaturation = Math.random() * (125 - 90) + 90;
-  let randomContrast = Math.random() * (170 - 80) + 80;
-  let randomBrightness = Math.random() * (135 - 85) + 85;
-  return setInterval(() => {
-    Math.random() < 0.5 ? randomDegree += Math.floor(Math.random() * 11) + 1 : randomDegree -= Math.floor(Math.random() * 11);
-    element.style.filter = `hue-rotate(${randomDegree}deg) saturate(${randomSaturation}%) contrast(${randomContrast}%) brightness(${randomBrightness}%) drop-shadow(0 0 1em rgba(255, 255, 255, 0.5))`;
+    intervalCount++;
+    if (intervalCount >= intervalsTillNextChange) {
+      targetDegree += getRandomDegree();
+      targetSaturation = Math.random() * (125 - 90) + 90;
+      targetContrast = Math.random() * (isHover ? 170 - 80 : 120 - 80) + 80;
+      targetBrightness = Math.random() * (isHover ? 135 - 85 : 110 - 90) + (isHover ? 85 : 90);
+      intervalCount = 0;
+      intervalsTillNextChange = getNewIntervalsTillNextChange();
+    }
+    currentDegree += (targetDegree - currentDegree) * 0.05;
+    currentSaturation += (targetSaturation - currentSaturation) * 0.05;
+    currentContrast += (targetContrast - currentContrast) * 0.05;
+    currentBrightness += (targetBrightness - currentBrightness) * 0.05;
+    updateFilter();
   }, interval);
 }
 function handleDisengage(element, intervalId) {
   clearInterval(intervalId);
   element.style.filter = 'none';
 }
-alwaysShift.forEach(element => {
-  element.shiftIncrement = Math.floor(Math.random() * 111) + 1;
-  const randomInterval = 111 + Math.floor(Math.random() * 1001);
-  element.intervalId = startAlwaysShift(element, randomInterval);
-  setInterval(() => {
-    element.shiftIncrement = Math.random() < 0.5 ? Math.floor(Math.random() * 11) + 1 : Math.floor(Math.random() * -10);
-  }, 111 + Math.random() * 1234);
+alwaysShift.forEach((element) => {
+  element.intervalId = startShift(element, getRandomInterval());
 });
 hoverShift.forEach(element => {
   let intervalId;
   let disengageTimeout;
   element.addEventListener('mouseover', () => {
-    intervalId = startHoverShift(element);
+    intervalId = startShift(element, getRandomInterval(), true);
   });
   element.addEventListener('click', () => {
     clearInterval(intervalId);
-    intervalId = startHoverShift(element);
+    intervalId = startShift(element, getRandomInterval(), true);
   });
   element.addEventListener('touchstart', () => {
     clearInterval(intervalId);
-    intervalId = startHoverShift(element);
+    intervalId = startShift(element, getRandomInterval(), true);
     disengageTimeout = setTimeout(() => handleDisengage(element, intervalId), 888);
   });
-  element.addEventListener('mouseout', () => {
-    handleDisengage(element, intervalId);
-  });
+  element.addEventListener('mouseout', () => {handleDisengage(element, intervalId);});
 });
 }
diff --git a/js/detect-mobile.js b/js/detect-mobile.js
@@ -1,7 +1,6 @@
 // Detect if user is viewing from mobile device
 function detectMobile() {
-  const isMobile = (window.matchMedia("(orientation: portrait)").matches) || 
-                     (window.innerHeight > window.innerWidth) ||
-                   /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini|windows phone|kindle|playbook|silk|mobile|tablet|samsung|lg|htc|nokia|motorola|symbian|fennec|maemo|tizen|blazer|series60|ucbrowser|bada|micromessenger|webview/.test(navigator.userAgent.toLowerCase());
+  const isMobile = (window.matchMedia("(orientation: portrait)").matches) || (window.innerHeight > window.innerWidth) ||
+/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini|windows phone|kindle|playbook|silk|mobile|tablet|samsung|lg|htc|nokia|motorola|symbian|fennec|maemo|tizen|blazer|series60|ucbrowser|bada|micromessenger|webview/.test(navigator.userAgent.toLowerCase());
   return !isMobile;
 }