Для создания анимации заголовка при прокрутке страницы на чистом JavaScript можно использовать следующий подход:
1. Получите элемент заголовка, к которому вы хотите применить анимацию. Например, можно получить его по id:
```javascript
var header = document.getElementById('header');
```
2. Создайте функцию, которая будет обновлять стили элемента заголовка в зависимости от позиции прокрутки страницы:
```javascript
function animateHeader() {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
// Обновление стиля элемента заголовка в зависимости от значения scrollTop
// Например, можно изменить цвет фона или размер шрифта
header.style.backgroundColor = 'rgb(' + scrollTop + ', ' + scrollTop + ', ' + scrollTop + ')';
}
```
3. Добавьте обработчик события прокрутки страницы, который будет вызывать функцию анимации при каждом событии:
```javascript
window.addEventListener('scroll', animateHeader);
```
4. При желании, можно добавить дополнительные условия для запуска анимации только при определенной позиции прокрутки или на определенном интервале:
```javascript
function animateHeader() {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
if (scrollTop > 100) {
// Запуск анимации только при прокрутке более 100 пикселей
// ...
}
// ...
}
```
5. И, наконец, вызовите функцию анимации сразу после загрузки страницы, чтобы применить начальные стили:
```javascript
animateHeader();
```
Теперь заголовок будет анимироваться при прокрутке страницы в соответствии с заданными стилями.