Чтобы создать сайт на Tilda, не нужно уметь верстать. Можно взять шаблон и обойтись минимальными правками. Но для полноценного сайта с уникальным дизайном, потребуется дополнительное обучение.
Конструктор предлагает два типа анимации:
- Basic animation — стандартные эффекты. Например, фиксация, параллакс или плавное появление блока на странице.
- Step-by-step Animation — пошаговое изменение состояния элемента для создания уникального поведения.
Стандартную анимацию можно выбрать в настройках блоков — например, сделать, чтобы при скролле фотографии плавно появлялись из-за пределов экрана или текст фиксировался на странице.
Пошаговая анимация настраивается только в редакторе Zero Block. Её можно применить к любому элементу интерфейса. В настройках есть раздел «Step by Step Animation». Чтобы приступить к добавлению шагов, нажмите «Add».
Для начала нужно выбрать условия старта анимации. Всего их пять:
- Element of Sceen - старт при отображении элемента.
- Block on Screen— старт при отображении блока.
- On Scrol — анимация работает только во время скролла.
- On Hover — старт при наведении курсора.
- On Click — старт анимации по клику.
- Start Trigger — привязка анимации к области, при появлении которой будет срабатывать условие (верх, центр или низ окна).
- Triffer off — смещение старта анимации относительно триггера.
- Loop — зацикливание проигрывания.
Чтобы посмотреть, как это работает, используйте кнопки «Play Element» и «Play All». В первом случае проигрывается анимация выбранного элемента, во втором — поведение всех элементов, которые есть на экране. Но прежде чем запускать предварительный просмотр, нужно настроить шаги — то есть показать конструктору все этапы анимации.
Шаги добавляются кнопкой «Add Step». Дальше нужно изменить состояние элемента. Всего есть 7 свойств:
- Duration — продолжительность воспроизведения анимации. Если включено зацикливание (Loop), то после завершения анимация запускается заново.
- Move — местоположение элемента. Можно задавать его конкретными значениями или просто передвигать элемент мышкой.
- Scale — размер.
- Opacity — прозрачность.
- Rotate — поворот элемента.
- Easing — выбор эффекта воспроизведения: Linear — линейное, easeIn — замедление на старте, easeOut — замедление перед винишем, easeInOut — замедление на старте и перед финишем, bounceFin — небольшой рывок перед началом анимации.
- Delay — задержка перед воспроизведением.
Совет: если вы хотите, чтобы элемента сначала не было на экране, задайте ему нулевой шаг со 100% прозрачностью.
По сути, анимация — это добавление шагов с изменёнными свойствами элемента. Например, на первом шаге он в левом верхнем углу блока, а на втором — в правом нижнем. Продолжительность анимации — 2 секунды. Это значит, что ваш элемент при срабатывании условия будет в течение 2 секунд ползти из одного угла блока в другой. Это примитивный пример анимации. На самом деле, в Zero Block можно создавать впечатляющие эффекты.
В одном из последних обновлений Tilda появилась поддержка пошаговой анимации на мобильных устройствах. Сначала настраивается анимация для десктопа, затем её можно оптимизировать под небольшие экраны. Благодаря этому ваш сайт на любом устройстве будет оставаться интерактивным и привлекательным для посетителей.
Получить бесплатную консультацию по ИТ услугам можно на сайте -https://dyakov.us/webstudio
#сделатьсайтсамому #заказатьсайт #сммуслуги #сммуслугисша #smmserviceusa #seoservice #seoуслугисша #dyakovstudio