2024-04-18 16:22:51 +00:00
|
|
|
let gradientSpinElems = document.getElementsByClassName('gradient-spin');
|
2024-04-18 18:39:22 +00:00
|
|
|
let gradientAngles = Array.from({ length: gradientSpinElems.length }, () => Math.floor(Math.random() * 361) + 1);
|
|
|
|
let gradientInterval;
|
|
|
|
|
|
|
|
reduceMotion();
|
2024-04-18 14:52:32 +00:00
|
|
|
|
|
|
|
function updateGradientAngle() {
|
2024-04-18 18:39:22 +00:00
|
|
|
for (let i = 0; i < gradientSpinElems.length; i++) {
|
|
|
|
gradientAngles[i] += Math.floor(Math.random() * 5) - 5;
|
|
|
|
if (gradientAngles[i] > 360) {
|
|
|
|
gradientAngles[i] = 0;
|
|
|
|
}
|
|
|
|
gradientSpinElems[i].style.background = `linear-gradient(${gradientAngles[i]}deg, #1a9fff, #946beb)`;
|
2024-04-18 14:52:32 +00:00
|
|
|
}
|
2024-04-18 18:39:22 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
function reduceMotion() {
|
|
|
|
let reduceMotionState = document.getElementById('reduce-motion-switch').checked;
|
|
|
|
console.log(reduceMotionState);
|
|
|
|
if (reduceMotionState) {
|
|
|
|
clearInterval(gradientInterval);
|
|
|
|
console.log('stopped');
|
|
|
|
} else {
|
|
|
|
gradientInterval = setInterval(function () {
|
|
|
|
updateGradientAngle();
|
|
|
|
}, 100);
|
2024-04-18 14:52:32 +00:00
|
|
|
}
|
|
|
|
}
|