Изменение фона при движении мышки js

Question

Есть у меня фон

background: rgb(87,43,241);
background: linear-gradient(90deg, rgba(87,43,241,1) 0%, rgba(63,26,182,1) 33%, rgba(148,34,47,1) 66%, rgba(194,48,67,1) 100%);

Как сделать так чтобы при движении мышки с лева направо и наоборот менялся цвет фона? изначально должен быть такой background: rgb(87,43,241); потом rgba(63,26,182,1), дальше rgba(148,34,47,1) и конечный rgba(194,48,67,1)

Нашел такой скрипт, но он так и непонял как он работает, куда и как делать?

  document.addEventListener('mousemove', e => {
        const x = (e.clientX / window.screen.availWidth) * 360;
        const x2 = (e.clientX / window.screen.availWidth) * 180;
        document.body.style.background = `linear-gradient(90deg, hsl(${x}, 100%, 50%), hsl(${x2}, 50%, 50%)`;
    });

Сейчас там по скроллу немного другие цвета(зеленые и прочее). В идеале там 4 цвета и можно по 25% их как то разделить, если же курсор выходит за рамки экрана то она должна возвращаться на первоначальный цвет

Answer 1

    Может такое решение? В этом решении можно еще поиграться с количеством точек останова. Здесь их 4. Можно сделать больше.

    body {
    background: rgb(87,43,241);
    }
    
    document.addEventListener('mousemove', e => {
    const x = 253 + (e.clientX / window.screen.availWidth);
    const x2 = 254 + (e.clientX / window.screen.availWidth)*106;
    const x3 = 254 + (e.clientX / window.screen.availWidth)*106;
    const x4 = 352 + (e.clientX / window.screen.availWidth)*8;
    document.body.style.background = `linear-gradient(90deg,hsl(${x},88%,56%),hsl(${x2},75%,41%),hsl(${x3},63%,36%),hsl(${x4},60%,47%))`;
    });

Answer 2

Цвета в массиве можно удалять или добавлять - от их количества зависит размер зон срабатывания, а распределяются они равномерно по ширине документа:

// Массив с набором цветов указанных в вопросе
// const BG_COLORS = ['rgba(87,43,241,1)', 'rgba(63,26,182,1)', 'rgba(148,34,47,1)', 'rgba(194,48,67,1)'];

const BG_COLORS = ['rgba(255,50,50,1)', '#FC0F', 'CYAN', 'hsla(120,75%,50%,1)', 'rgba(100,50,255,1)', '#840F', 'BLUE', 'hsla(300,75%,50%,1)'];

document.addEventListener('mousemove', (ev) => {
  let nSizeOfPart = document.documentElement.offsetWidth / BG_COLORS.length;
  document.body.style.backgroundColor = BG_COLORS[Math.trunc(ev.clientX / nSizeOfPart)];
});
/* Цвет фона при курсоре за пределами документа */
document.addEventListener('mouseleave', (ev) => {
  document.body.style.backgroundColor = 'rgba(255,255,255,1)';
});

/* For example only --> */ body { transition: background-color .5s ease; }

Если нужно менять не сплошной цвет, а градиенты и/или узоры, то необходимо менять свойство background полностью:

const BG_TRACERYS = [
  'linear-gradient(45deg, #CBDDEB, #CBDDEB 50%, #527383 50%) center/50px 50px repeat',
  'linear-gradient(#98B7AF 1px, transparent 1px) center/2em 2em repeat, linear-gradient(90deg, #98B7AF 1px, transparent 1px) center/2em 2em repeat white',
  'radial-gradient(transparent 40%, white 50%) center/30px 30px repeat, radial-gradient(transparent 40%, #EF3641 40%) center/20px 20px repeat',
  'linear-gradient(135deg, #ECEDDC 25%, transparent 25%) calc(50% - 50px) 50%/100px 100px repeat, linear-gradient(225deg, #ECEDDC 25%, transparent 25%) calc(50% - 50px) 50%/100px 100px repeat, linear-gradient(315deg, #ECEDDC 25%, transparent 25%) center/100px 100px repeat, linear-gradient(45deg, #ECEDDC 25%, transparent 25%) center/100px 100px repeat #F4CF24',
  'repeating-conic-gradient(#090 0deg 5deg, transparent 5deg 10deg) center/100vw 100vh cyan'
];

document.addEventListener('mousemove', (ev) => {
  let nSizeOfPart = document.documentElement.offsetWidth / BG_TRACERYS.length;
  document.body.style.background = BG_TRACERYS[Math.trunc(ev.clientX / nSizeOfPart)];
});
/* Фоновый узор при курсоре за пределами документа */
document.addEventListener('mouseleave', (ev) => {
  document.body.style.background = 'radial-gradient(#000,#fff) center/200vw 200vh repeat';
});

/* For example only --> */ body { margin: 0; height: 100vh; transition: background .5s ease; }

По такому же принципу можно менять изображения (желательно кешировать эти картинки, во избежании мерцания):

const BG_IMAGES = [
  "url('https://i.stack.imgur.com/MraLT.jpg') center/cover no-repeat #f00",
  "url('https://i.stack.imgur.com/VxVNC.jpg') center/cover no-repeat #fa0",
  "url('https://i.stack.imgur.com/A9VLC.jpg') center/cover no-repeat #0a0",
  "url('https://i.stack.imgur.com/oYG0R.jpg') center/cover no-repeat #00f"
];

document.addEventListener('mousemove', (ev) => {
  let nSizeOfPart = document.documentElement.offsetWidth / BG_IMAGES.length;
  document.body.style.background = BG_IMAGES[Math.trunc(ev.clientX / nSizeOfPart)];
});
/* Фоновое изображение при курсоре за пределами документа */
document.addEventListener('mouseleave', (ev) => {
  document.body.style.background = "url('https://i.imgur.com/pCm96IG.png') center/contain no-repeat #fff";
});

/* For example only --> */ body { margin: 0; height: 100vh; transition: background .3s linear; }

Также можно изменять цвет текста:

// Массив с набором цветов указанных в вопросе
// const TXT_COLORS = ['rgba(87,43,241,1)', 'rgba(63,26,182,1)', 'rgba(148,34,47,1)', 'rgba(194,48,67,1)'];

const TXT_COLORS = ['rgba(255,50,50,1)', '#FC0F', 'CYAN', 'hsla(120,75%,50%,1)', 'rgba(100,50,255,1)', '#840F', 'BLUE', 'hsla(300,75%,50%,1)'];

document.addEventListener('mousemove', (ev) => {
  let nSizeOfPart = document.documentElement.offsetWidth / TXT_COLORS.length;
  document.body.style.color = TXT_COLORS[Math.trunc(ev.clientX / nSizeOfPart)];
});
/* Цвет текста при курсоре за пределами документа */
document.addEventListener('mouseleave', (ev) => {
  document.body.style.color = 'rgba(0,0,0,.25)';
});

/* For example only --> */ body { margin: 0; display: grid; place-items: center; height: 100vh; font: bold 120px/1em sans-serif; transition: color .5s ease; }

COLOR

БЛОГ НА HUSL

Изменение фона при движении мышки js

Ответы (2 шт):