Индикатор чтения, управляемый прокруткой, на чистом CSS
Давайте заглянем в будущее и познакомимся с экспериментальной технологией, которая позволяет делать анимации, привязанные к скроллу, на чистом CSS.
Демонстрацию лучше смотреть в браузере Chrome.
Мы будем делать индикатор прочтения статьи, который будет заполняться по мере чтения (то есть по мере прокрутки страницы). Сначала добавим в разметку элемент .progress.
Зададим индикатору размеры и фоновый цвет.
Чтобы индикатор всегда был виден на экране, зададим ему фиксированное позиционирование и привяжем к верху вьюпорта. В реальных проектах можно указать z-index, чтобы полоса точно была видна, но для демонстрации это не потребуется.
Чтобы удостовериться, что полоса видна прокрутите страницу вниз.
Индикатор прогресса чтения должен заполняться слева направо, а для этого ширина элемента .progress должна изменяться с 0 старте чтения до 100% в конце статьи.
Размером индикатора будем управлять с помощью CSS-трансформации scaleX, зашитой внутрь CSS-анимации grow-progress:
Применим к индикатору анимацию grow-progress с линейной скоростью проигрывания.
Свойству animation-duration нужно задать значение auto, так анимация будет привязана не ко времени, а к состоянию скролла. Для этого нужно создать таймлайн или временную шкалу прокрутки.
Создадим временную шкалу прокрутки с помощью свойства scroll-timeline.
Зададим ей имя --page-scroll. Оно обязано начинаться с --. Значение block означает, что шкала привязана к вертикальной оси прокрутки.
Временная шкала задана для html, так как мы хотим отслеживать прокрутку всей страницы.
А теперь свяжем временную шкалу анимации с временной шкалой прокрутки.
Для этого укажем в свойстве animation-timeline название временной шкалы прокрутки, то есть --page-scroll.
Покрутите страницу, чтобы убедиться, что анимация работает. Лучше использовать браузер Chrome
Изменим значение transform-origin у индикатора, чтобы начало трансформации было привязано к левому краю блока.
Теперь можно уменьшить высоту индикатора, чтобы шкала прогресса не отвлекала от чтения текста.
Демонстрация завершена.
