[Фича 6] Делаем эффект бегущей строки

Всем привет! В данном мини-уроке мы научимся делать эффектную и простую пошаговую анимацию "Эффект бегущей строки".

Делается в несколько кликов, повторить сможет каждый. Приступаем.

Шаг 1. Добавляем текстовый блок в контейнер

Устанавливаем маркер за областью контейнера (место, куда будет уезжать наш текст)

Сам текст оттаскиваем на противоположную сторону контейнера (так же за её область)

Переходим к настройкам правого текста. Идём в STEP BY STEP ANIMATION.

Event: element on screen (действие воспроизводится в момент отображения на экране)

Loop: loop (зацикливаем действие)

Steps: add step

Добавляем первый шаг.

Duration: продолжительность анимации в секундах. Ставим 2 секунды (если нужно ускорить бегущую строку - ставим время меньше, если длиннее - больше, всё логично)

Move X/Y: перемещаем текст на уровень того маркера (такого же текста, который мы разместили слева от контейнера)

У меня получилось -1620px. Удаляем маркер (текст сверху, к которому анимация не применялась).

Для большего эффекта продублируем исходные текстовые блоки (на которых уже есть анимация)

Сохраняем, публикуем и смотрим. У меня получилось как-то так:

Это очень простой вариант, как создать подобный эффект. Немного позже мы углубимся в пошаговую анимацию и разберём более сложный вопрос.