Как реализовать такой анимированный фон?

Для создания анимированного фона веб-страницы с использованием JavaScript можно воспользоваться несколькими подходами. Один из самых распространенных способов - это использование CSS анимаций и JavaScript для управления этими анимациями.

Первым шагом будет создание анимации с помощью CSS. Для этого можно использовать ключевые кадры (keyframes). Ключевые кадры позволяют определить промежуточные состояния анимации в определенные моменты времени.

Например, создадим анимацию движущихся градиентных полос на фоне. Для начала определим стили для элемента, который будет использоваться как фон:

.background {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

Затем создадим ключевые кадры для анимации:

@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

В данном примере, анимация начинается с background-position 0% 50% и заканчивается background-position 100% 50%, что создает эффект движущихся градиентных полос.

Для применения анимации к элементу, добавим класс анимации к элементу фона:

.background {
  animation: gradientAnimation 5s infinite linear;
}

В данном примере, мы задаем анимацию с именем gradientAnimation, продолжительностью 5 секунд, бесконечно повторяющуюся, и линейное время выполнения.

Теперь, когда у нас есть анимация, мы можем добавить JavaScript для управления этой анимацией. Например, мы можем использовать JavaScript для обновления продолжительности анимации или изменения цветов палитры.

var background = document.querySelector('.background');

function updateAnimationDuration(duration) {
  background.style.animationDuration = duration + 's';
}

function updateGradientColors(colors) {
  background.style.backgroundImage = 'linear-gradient(to right, ' + colors.join(',') + ')';
}

updateAnimationDuration(10); // изменить продолжительность анимации на 10 секунд
updateGradientColors(['red', 'blue', 'green']); // изменить палитру градиентных полос

В данном примере, мы используем querySelector для получения элемента с классом background. Затем мы создаем две функции: одна для обновления продолжительности анимации, и другая для обновления цветов градиентных полос. В каждой функции мы применяем соответствующие значения к элементу через свойства style.

Таким образом, используя CSS и JavaScript, мы можем создать анимированный фон, который можно контролировать и адаптировать в зависимости от потребностей проекта.