Один или несколько блоков с горизонтальным скроллом смотрятся нестандартно и привлекают внимание посетителей к контенту сайта. Сделать такой эффект на Тильде можно за несколько минут.
ШАГ 1
Добавьте на страницу Zero Block, разместите горизонтально составляющие блока.
ШАГ 2 и 3
Выберите один из элементов, который должен двигаться горизонтально. Перейдите в раздел Step-by-step Animation и в блоке Event выберите значение On scroll.
ШАГ 4
Добавьте новый шаг, задайте для него значения прокрутки скролла и движения объекта по оси Х, зафиксируйте элемент.
Повторите эти действия для каждого объекта. Опубликуйте страницу и наслаждайтесь эффектом
Подсказка: высота Нулевого блока должна равняться сумме ширин второго и последующих элементов для горизонтального скролла плюс отступ между ними. Например, если у вас 3 элемента шириной 700px и 2 отступа по 100px, то высота блока составит 700х2+100х2=1600px.
В зависимости от расположения блока на странице может понадобиться настройка Start Trigger. Этот параметр подскажет браузеру, когда запускать анимацию. Например, если блок в начале страницы, установите значение Window Bottom в параметре Start Trigger.
В зависимости от расположения блока на странице может понадобиться настройка Start Trigger. Этот параметр подскажет браузеру, когда запускать анимацию. Например, если блок в начале страницы, установите значение Window Bottom в параметре Start Trigger.
Смена цвета фона
при скролле
при скролле
О3
Изменение цвета фона через фигуру — эффектный приём для создания динамичной страницы на сайте ..
Сложность
Фигура
Скролл
Shape
Desktop
Читать
Mobile
Эффект разлетающихся карточек
О2
Такой приём можно использовать там, где необходимо захватить внимание пользователя — на обложку
Сложность
Карточки
Скролл
Mobile
Читать
Desktop
Эффект
бегущей строки
бегущей строки
О1
Бегущую строку на сайте часто используют ситуативно, например, во время распродаж. Если разместить …
Сложность
Строка
Текст
Desktop
Mobile
Читать
Больше полезных дизайн-советов,
а также обновления платформы ищите
в наших социальных сетях.
а также обновления платформы ищите
в наших социальных сетях.
Подписывайтесь, чтобы ничего не пропустить
