tgoop.com/htmlshit/3721
Last Update:
#статья дня
Как решить главную проблему бесконечной бегущей строки?
При создании бегущей строки (marquee, да) в CSS всегда встаёт вопрос: в какой момент элементу нужно «перепрыгнуть» в начало, чтобы анимация выглядела непрерывной? Если рассчитать неправильно — появляются рывки или пустые промежутки.
Как правило, это решается или через JavaScript, или дублированием элементов до какого-то неразумного предела. Или и так и так.
В статье на Frontend Masters уже так хорошо знакомым нам Темани Афифом (он автор CSS Shape) предложен современный способ, где эта проблема решается автоматически.
Используются новые функции sibling-index() и sibling-count(). Они позволяют CSS «понимать», какой по счёту элемент в наборе и сколько всего элементов.
На основе этих данных каждому элементу назначается своя задержка старта анимации. Это делается через формулу: задержка = индекс * (общая_длительность / количество_элементов).
Путь движения задаётся через offset: shape(...), а сама анимация повторяется бесконечно (infinite linear).
В результате элементы выстраиваются один за другим и «зацикливаются» без единого рывка — всё считается динамически, без ручных правок.
И самое приятное: HTML остаётся простым <div> с изображениями, а вся магия — в десятке строк CSS!
Почитайте, очень круто вышло.
#css #marquee
BY Будни разработчика
Share with your friend now:
tgoop.com/htmlshit/3721