[Фича 6] Делаем эффект бегущей строки
Всем привет! В данном мини-уроке мы научимся делать эффектную и простую пошаговую анимацию "Эффект бегущей строки".
Делается в несколько кликов, повторить сможет каждый. Приступаем.
Шаг 1. Добавляем текстовый блок в контейнер
Устанавливаем маркер за областью контейнера (место, куда будет уезжать наш текст)
Сам текст оттаскиваем на противоположную сторону контейнера (так же за её область)
Переходим к настройкам правого текста. Идём в STEP BY STEP ANIMATION.
Event: element on screen (действие воспроизводится в момент отображения на экране)
Loop: loop (зацикливаем действие)
Steps: add step
Добавляем первый шаг.
Duration: продолжительность анимации в секундах. Ставим 2 секунды (если нужно ускорить бегущую строку - ставим время меньше, если длиннее - больше, всё логично)
Move X/Y: перемещаем текст на уровень того маркера (такого же текста, который мы разместили слева от контейнера)
У меня получилось -1620px. Удаляем маркер (текст сверху, к которому анимация не применялась).
Для большего эффекта продублируем исходные текстовые блоки (на которых уже есть анимация)
Сохраняем, публикуем и смотрим. У меня получилось как-то так:
Это очень простой вариант, как создать подобный эффект. Немного позже мы углубимся в пошаговую анимацию и разберём более сложный вопрос.