Бегущую строку на сайте часто истользуют ситуативно, например, во время распродаж. Если разместить элемент на обложке интернет-магазина, посетителю будет сложно не заметить информацию о скидках.
- Создайте на странице Zero Block, разместите прямогульник шириной 100% Window Container и добавьте текст.
2. Выберите элемент, сделайте его копию-ориентир и перейдите в раздел Step-by-step animation.
В параметре Event выберите значение Element on Screen, в Loop – Loop. Добавьте шаг анимации и установите значение 2 для показателя Duration, значения Move X и Y вы получите, сдвинув фигуру на место ориентира.
В параметре Event выберите значение Element on Screen, в Loop – Loop. Добавьте шаг анимации и установите значение 2 для показателя Duration, значения Move X и Y вы получите, сдвинув фигуру на место ориентира.
3. Скопируйте текст с готовой анимацией и переместите копию на место ориентира – настройки анимации сохранятся. Удалите текст-ориентир.
4. Сделайте ещё несколько копий с сохранением расстояния между ними, чтобы бегущая строка хорошо смотрелась на больших экранах.
Чтобы анимация заработала на мобильных устройствах, нужно перейти во вкладку с мобильной адаптацией и в параметре Mobile Animation нажать кнопку Switch On.
Дизайн бегущих строк может быть разным. Желательно соблюсти баланс — строка должна гармонично смотреться на сайте, а посетитель легко сможет прочитать движущийся текст.
Дизайн бегущих строк может быть разным. Желательно соблюсти баланс — строка должна гармонично смотреться на сайте, а посетитель легко сможет прочитать движущийся текст.
Меню с горизонтальной прокруткой
О1
Большое количество пунктов меню
на сайте может смотреться громоздко в мобильной версии …
на сайте может смотреться громоздко в мобильной версии …
Читать
Сложность
14.01.2021
Меню
Скролл
ZeroBlock
Mobile
Горизонтальный скролл карточек
О2
Один или несколько блоков с горизонтальным скроллом смотрятся нестандартно и привлекают …
Читать
Сложность
14.01.2021
Меню
Скролл
ZeroBlock
Mobile
Смена цвета фона
при скролле
при скролле
О3
Изменение цвета фона через фигуру — эффектный приём для создания динамичной страницы на сайте ...
Читать
Сложность
14.01.2021
Меню
Скролл
ZeroBlock
Mobile
Больше полезных дизайн-советов,
а также обновления платформы ищите
в наших социальных сетях.
а также обновления платформы ищите
в наших социальных сетях.
Подписывайтесь, чтобы ничего не пропустить
