💡Совет по CSS💡

Вы можете создавать управляемые прокруткой микровзаимодействия с помощью animation-timeline и пользовательских свойств 🔥

.search {
  animation: shrink;
  animation-timeline: scroll();
  animation-range: 0 calc(var(--header-height) * 0.5);
}
@ keyframes shrink {
  to { width: calc(100% - var(--button-size); }
}

Параметр --header-height используется для определения высоты контейнера для заголовка. Вы можете использовать его для диапазона анимации, используемого в различных анимациях прокрутки.

Для другого примера, вы можете анимировать раскрытие бокс-тени на заголовке после того, как поиск завершился

header {
  animation: shadow;
  animation-timeline: scroll();
  animation-range:
    var(--header-height)
    calc(var(--header-height) * 1.5);
}
@ keyframes shadow {
  to { box-shadow: 0 5px 10px hsl(0 0% 0%); }
}

Все работает с помощью анимации-таймлайна scroll(), которая подключается к прокрутке страницы. А затем с помощью параметра --header-height в разных диапазонах анимации

@javascriptv