MediaWiki:Vector.js: Difference between revisions

From Office of Queer Affairs
No edit summary
No edit summary
Line 16: Line 16:
})
})


// Function to generate a random bright color
// Background color randomizer
function getRandomBrightColor() {
function getRandomBrightColor() {
   const min = 200; // Minimum value for bright colors
   const min = 200; // Minimum value for bright colors
Line 24: Line 24:
   return `rgb(${r},${g},${b})`;
   return `rgb(${r},${g},${b})`;
}
}
// Set the initial random background color
// Set the initial random background color
function setInitialBackgroundColor() {
function setInitialBackgroundColor() {
   const randomColor = getRandomBrightColor();
   const randomColor = getRandomBrightColor();
   document.body.style.backgroundColor = randomColor;
   document.documentElement.style.setProperty('--background-color-base', randomColor);
}
}
// Gradually change the background color
// Gradually change the background color
function changeBackgroundGradually() {
function changeBackgroundGradually() {
   setInterval(() => {
   setInterval(() => {
     const randomColor = getRandomBrightColor();
     const randomColor = getRandomBrightColor();
     document.body.style.transition = "background-color 2s linear"; // Smooth transition over 2 seconds
     document.documentElement.style.transition = "background-color 2s linear"; // Smooth transition
     document.body.style.backgroundColor = randomColor;
     document.documentElement.style.setProperty('--background-color-base', randomColor);
   }, 5000); // Change every 5 seconds
   }, 5000); // Change every 5 seconds
}
}
// Initialize the process
// Initialize the process
setInitialBackgroundColor();
setInitialBackgroundColor();
changeBackgroundGradually();
changeBackgroundGradually();

Revision as of 09:55, 30 September 2024

/* All JavaScript here will be loaded for users of the Vector skin */

//make destination of the logo hyperlink random
let logos = document.querySelectorAll('.mw-logo');
logos.forEach(function(logo) {
  logo.href = 'https://ooqa.karls.computer/Special:Random';
});


// add a little disorder
function rand(min = -1, max = 1) {
  return Math.random() * (max - min) + min
}
document.querySelectorAll('ul li, .mw-logo > *').forEach( e => {
	e.style.rotate = `${ rand(-3, 3) }deg`
})

// Background color randomizer
function getRandomBrightColor() {
  const min = 200; // Minimum value for bright colors
  const r = Math.floor(Math.random() * (255 - min) + min);
  const g = Math.floor(Math.random() * (255 - min) + min);
  const b = Math.floor(Math.random() * (255 - min) + min);
  return `rgb(${r},${g},${b})`;
}
// Set the initial random background color
function setInitialBackgroundColor() {
  const randomColor = getRandomBrightColor();
  document.documentElement.style.setProperty('--background-color-base', randomColor);
}
// Gradually change the background color
function changeBackgroundGradually() {
  setInterval(() => {
    const randomColor = getRandomBrightColor();
    document.documentElement.style.transition = "background-color 2s linear"; // Smooth transition
    document.documentElement.style.setProperty('--background-color-base', randomColor);
  }, 5000); // Change every 5 seconds
}
// Initialize the process
setInitialBackgroundColor();
changeBackgroundGradually();