Как сделать анимацию заголовка при скролле?

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

Шаг 1: Создайте HTML разметку

Сначала создайте HTML разметку с заголовком, который вы хотите анимировать. Например, вы можете создать элемент <h1> с классом "animated-title".

<h1 class="animated-title">Заголовок</h1>

Шаг 2: Добавьте стили

Добавьте CSS стили для класса "animated-title". Здесь вы можете определить начальные значения для заголовка, например, цвет текста, размер шрифта и т. д.

.animated-title {
  color: #000;
  font-size: 24px;
  transition: color 0.3s ease-in-out;
}

Шаг 3: Напишите JavaScript код

Теперь вам потребуется JavaScript код, чтобы анимировать заголовок при скролле страницы. Вы можете использовать событие "scroll" для отслеживания момента скролла и функцию "requestAnimationFrame" для выполнения анимации с оптимальной производительностью.

// Получаем элемент заголовка
const title = document.querySelector('.animated-title');

// Функция анимации
function animateTitle() {
  // Определяем текущую позицию страницы относительно верха
  const scrollPosition = window.scrollY;

  // Выполняем анимацию для заголовка при скролле
  title.style.color = `rgb(${scrollPosition}, ${scrollPosition}, ${scrollPosition})`;

  // Вызываем функцию анимации при следующей перерисовке экрана
  requestAnimationFrame(animateTitle);
}

// Запускаем анимацию при скролле страницы
window.addEventListener('scroll', animateTitle);

// Вызываем функцию анимации в первый раз
animateTitle();

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

Это основной шаблон, который можно использовать для создания анимации заголовка при скролле на JavaScript. Вы можете дополнить его, чтобы изменить или добавить другие эффекты, в зависимости от ваших потребностей и креативности.