#статья дня

Как решить главную проблему бесконечной бегущей строки?

При создании бегущей строки (marquee, да) в CSS всегда встаёт вопрос: в какой момент элементу нужно «перепрыгнуть» в начало, чтобы анимация выглядела непрерывной? Если рассчитать неправильно — появляются рывки или пустые промежутки.

Как правило, это решается или через JavaScript, или дублированием элементов до какого-то неразумного предела. Или и так и так.

В статье на Frontend Masters уже так хорошо знакомым нам Темани Афифом (он автор CSS Shape) предложен современный способ, где эта проблема решается автоматически.

Используются новые функции sibling-index() и sibling-count(). Они позволяют CSS «понимать», какой по счёту элемент в наборе и сколько всего элементов.

На основе этих данных каждому элементу назначается своя задержка старта анимации. Это делается через формулу: задержка = индекс * (общая_длительность / количество_элементов).

Путь движения задаётся через offset: shape(...), а сама анимация повторяется бесконечно (infinite linear).

В результате элементы выстраиваются один за другим и «зацикливаются» без единого рывка — всё считается динамически, без ручных правок.

И самое приятное: HTML остаётся простым <div> с изображениями, а вся магия — в десятке строк CSS!

Почитайте, очень круто вышло.

#css #marquee