Существует ли способ создать темный фон и “раскрывать” цвет, используя мышь?

Я пытаюсь создать свой собственный веб-сайт в первый раз, и у меня возникают некоторые трудности. Я слежу за этим учебником, чтобы сделать так, чтобы световой круг следовал за мышью. Вот код. Но я хотел бы, чтобы градиент радуги заполнял всю мою домашнюю страницу, а мой световой круг показывал цвета, когда он движется по странице, оставляя другие части экрана темными, более похожими на оригинальный веб-сайт, который воспроизводит учебник на YouTube, где цвета меняются по мере движения мыши по экрану.

Мне пришла в голову идея иметь разные слои: темный фон, “блоб”, градиент, а затем размытие, как в учебном материале. Градиент не будет виден на темном фоне, но когда белый “блоб” будет под градиентом, цвета будут проявляться — это то, о чем я думаю. В данный момент у меня есть только белый “блоб” и темный фон. Мне интересно, возможно ли это вообще, так как я думаю, что проблема может быть в режимах смешивания градиента (хотя я не знаю, так ли это на самом деле).

У меня также есть проблемы с Safari. В Chrome у меня получается плавный “блоб”, который отслеживает мою мышь с размытие, однако в Safari “блоб” либо не появляется, либо отслеживание не работает, либо “блоб” сбрасывает свою позицию каждый раз, когда я двигаю мышью. Я знаю, что разные браузеры требуют разных решений, но мне было интересно, есть ли более простые способы убедиться, что оба браузера могут обрабатывать сайт.

Также, если у вас есть другой способ сделать так, чтобы мой “блоб” менял цвета, сохраняя линейный градиент, это тоже будет полезно!

Вот мой html, css и javascript код. Спасибо!

const blob = document.getElementById("blob");

window.onpointermove = event => {
  const {
    clientX,
    clientY
  } = event;

  blob.animate({
    left: `${clientX}px`,
    top: `${clientY}px`
  }, {
    duration: 2500,
    fill: "forwards"
  });
};

body {
  background-color: #222020;
  height: 100vh;
  margin: 0;
  overflow: hidden;
  position: relative;
}

#gradient-color {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(50% 123.47% at 50% 50%, #00ff94 0%, #720059 100%), linear-gradient(121.28deg, #669600 0%, #ff0000 100%), linear-gradient(360deg, #0029ff 0%, #8fff00 100%), radial-gradient(100% 164.72% at 100% 100%, #6100ff 0%, #00ff57 100%), radial-gradient(100% 148.07% at 0% 0%, #fff500 0%, #51d500 100%);
  background-blend-mode: screen, color-dodge, overlay, difference, normal;
  z-index: 1;
  opacity: 0;
}

#blob {
  height: 34vmax;
  aspect-ratio: 1;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: white;
  mix-blend-mode: difference;
  opacity: 1;
  z-index: 2;
}

#blur {
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 3;
  backdrop-filter: blur(12vmax);
}

<div id="gradient-color"></div>
<div id="blob"></div>
<div id="blur"></div>
<section class="showcase">
  <nav class="navbar vertical-center line line-vertical"></nav>
</section>

</div>

Ответ или решение

Конечно! Давайте разберемся с вашим запросом по созданию эффекта "раскрытия" цветов на фоне темной страницы при перемещении специального элемента (blob) мышью.

Шаги для достижения цели:

1. Структура HTML: Убедитесь, что у вас есть необходимые элементы – блоб (blob) и градиентный фон.

2. CSS для градиента и блоба:

   • Убедимся, что градиент и блоб находятся в правильном порядке по слоям, чтобы блоб мог "раскрывать" цвет, когда проходит над градиентом.
   • Используем mix-blend-mode, чтобы добиться интересных визуальных эффектов.

3. JavaScript для анимации блоба: Обеспечим плавное перемещение блока при движении мыши.

Полный код

HTML

<div id="gradient-color"></div>
<div id="blob"></div>
<div id="blur"></div>
<section class="showcase">
  <nav class="navbar vertical-center line line-vertical"></nav>
</section>

CSS

body {
  background-color: #222020;
  height: 100vh;
  margin: 0;
  overflow: hidden;
  position: relative;
}

#gradient-color {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(50% 123.47% at 50% 50%, #00ff94 0%, #720059 100%), 
              linear-gradient(121.28deg, #669600 0%, #ff0000 100%), 
              linear-gradient(360deg, #0029ff 0%, #8fff00 100%), 
              radial-gradient(100% 164.72% at 100% 100%, #6100ff 0%, #00ff57 100%), 
              radial-gradient(100% 148.07% at 0% 0%, #fff500 0%, #51d500 100%);
  background-blend-mode: multiply; /* Или другой режим по вашему усмотрению */
  z-index: 1;
}

#blob {
  height: 34vmax;
  aspect-ratio: 1;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: white;
  mix-blend-mode: difference; /* Это позволит вам видеть цвет под блобом */
  opacity: 1;
  z-index: 2;
}

#blur {
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 3;
  backdrop-filter: blur(12vmax);
}

JavaScript

const blob = document.getElementById("blob");

window.onpointermove = event => {
  const { clientX, clientY } = event;

  blob.animate({
    left: `${clientX}px`,
    top: `${clientY}px`
  }, {
    duration: 2500,
    fill: "forwards"
  });
};

Примечания

1. Браузерная совместимость: Ваша проблема с Safari может быть связана с поддержкой определенных свойств CSS, таких как backdrop-filter или mix-blend-mode. Чтобы улучшить совместимость, убедитесь, что у вас установлены все последние обновления Safari, и протестируйте с различными настройками браузера.

2. Дебаунс для анимации: Если вы хотите, чтобы анимация двигалась более плавно и не создавались избыточные анимации при быстром движении мыши, может помочь добавление дебаунса.

3. Другие эффекты: Если хотите обеспечить смену цветов для блоба, можно использовать анимации на CSS или динамическое изменение цвета в JavaScript.

Надеюсь, это поможет вам успешно завершить свой проект! Если у вас есть дополнительные вопросы или проблемы, не стесняйтесь спрашивать. Удачи!