Glo Academy on Telegram: “🎨 Колонки едут в противоположные стороны при ск…”

🎨 Колонки едут в противоположные стороны при скролле

Три колонки карточек: при прокрутке крайние уезжают вверх, средняя — вниз. Раньше это делали слушателем scroll и transform в JS, теперь хватает CSS:

.col {
  animation: up linear both;
  animation-timeline: view();
  animation-range: entry 0% cover 100%;
}
.col:nth-child(2) { animation-name: down; }

@keyframes up   { to { translate: 0 -30% } }
@keyframes down { to { translate: 0  30% } }

view() привязывает анимацию к положению колонки на экране: проехала колонка — продвинулись кадры. animation-range задаёт участок: от появления снизу (entry 0%) до ухода за верхний край (cover 100%). В @keyframes крайние колонки едут на 30% высоты вверх, средняя — вниз.

На гифке ползунок справа — положение скролла, колонки едут за ним. Обработчика scroll и расчётов на кадр нет.

animation-timeline ставь после шорткода animation, иначе он его сбросит. Chrome 115+, Safari 26+, Firefox пока Nightly — оборачивай в @supports.

🔥 — если было полезно

@glo_academy | #css_day