Индикатор прокрутки Hero — только для десктопа, скрывается при скролле

Hero на главной странице Fastry имеет небольшую деталь внизу: две сложенные шевронные стрелки, которые мягко подпрыгивают, привлекая взгляд вниз. Они появляются после завершения анимации hero и исчезают в момент начала прокрутки.

Включение

Индикатор прокрутки — это пропс компонента Hero. По умолчанию он выключен:

<Hero showScrollIndicator>
  ...
</Hero>

Только для десктопа: медиа-запрос

Индикатор прокрутки скрыт по умолчанию и становится видимым только когда область просмотра достаточно широка и высока:

.scroll-indicator-wrapper {
  display: none;
}

@media (min-width: 1024px) and (min-height: 500px) {
  .scroll-indicator-wrapper {
    display: block;
  }
}

Анимация

Элемент .scroll-indicator плавно появляется с задержанной CSS-анимацией:

.scroll-indicator {
  animation: si-fade-in 0.6s ease-out 1.4s backwards;
}

Задержка в 1.4 с гарантирует, что шевроны появятся только после того, как контент hero завершит анимацию.

Скрытие при прокрутке

Когда пользователь прокручивает страницу более чем на 50 пикселей, индикатор исчезает:

function onScroll() {
  if (window.scrollY > 50) {
    indicator?.classList.add('is-hidden');
    window.removeEventListener('scroll', onScroll);
  }
}

Связанные функции

Индикатор прокрутки присоединяется к двум другим элементам, отслеживающим прокрутку:

• Панель прогресса прокрутки — тонкая линия брендового цвета в шапке
• Кольцо прогресса прокрутки — круговая дуга вокруг кнопки «Наверх»

Все три используют --color-brand-500 и автоматически обновляются при изменении активной темы.