arrow-left
Вернуться к продуктам
Кратко о видео
В уроке показана полная настройка бегущей строки: добавление виджета Block List, включение анимации бегущей строки в его настройках, выбор направления (влево или вправо), скорость прокрутки, пауза при наведении. Отдельно разобрана настройка адаптивного размера текста через viewport-единицы, чтобы строка одинаково смотрелась на любом экране. Бегущая строка в Taptop — это Block List с включённой анимацией прокрутки, а не отдельный специализированный виджет. Скорость задаётся числом: чем выше значение, тем медленнее строка. Текст в vw масштабируется пропорционально ширине экрана без правок на брейкпоинтах. Урок для всех, кто хочет добавить движение на страницу без кода. Знание базовой работы с Block List в Taptop ускорит понимание, но не обязательно — урок объясняет с нуля.

Бегущая строка — лёгкий способ добавить движение на страницу

Страница выглядит статично — дизайн хороший, но нет движения. Хочется бегущую строку с логотипами или короткими фразами. Непонятно: какой виджет брать? Как настроить скорость и направление?
Бегущая строка в Taptop — виджет Block List: включаешь анимацию в настройках, задаёшь направление, скорость и паузу при наведении. Для текста внутри лучше использовать vw — пиксели ломают масштаб на разных экранах. Для всех, кто хочет добавить движение без сложных анимаций. После просмотра делаешь бегущую строку под любой контент.
Тайминги видео
00:00 — Добавление виджета Block List 00:30 — Настройка анимации: направление и скорость 01:00 — Настройка элемента: флекс, отступы, текст 01:30 — Почему пиксели не подходят для адаптива 02:00 — Настройка размера через viewport-единицы (vw) 03:00 — Адаптация мобильной версии

Другие продукты академии

Как выйти на фриланс
Разберётесь, как брать первые проекты, называть цену и общаться с клиентами
Для кого
Специалистов
Направление
Фриланс
Формат
Мини-курс
Длительность
13 уроков
Taptop с нуля: сайт-портфолио
Осваиваете базу Taptop и собираете сайт-портфолио, который можно оставить себе
Для кого
Новичков
Направление
Вёрстка
Формат
Мини-курс
Длительность
9 уроков
Как дизайнеру понять вёрстку
Разберётесь, как устроены сайты, чтобы увереннее работать с ними дальше
Для кого
Новичков
Направление
Вёрстка
Формат
Интенсив
Длительность
2 урока
Как собрать сложную анимацию
Собираете сложную анимацию и плавный переход между страницами
Для кого
Для тех, кто в теме
Направление
Анимации
Формат
Интенсив
Длительность
2 урока