Что такое trigger offset в тильде
1. Начнем с настройки Trigger offset / Точки начала анимации.
Точка отсчитывается относительно выбранной нами области, Window center.
Начните с верхнего объекта. Так удобнее рассчитать точки начала анимации для остальных. У него точка начала анимацииточка равна 0px. Это значит, что первый объект залипнет точно по центру экрана.
Нижний объект должен залипнуть когда коснется верхнего. Это значит, что его точка начала анимации будет ниже на высоту первого объекта. Ставим отступ100px.
2. Настроим Distance / Дистанцию.
Это то расстояние, которое должен пройти объект в режиие фиксирования. Начните настройку анимации с нижнего объекта. Так вам будет удобнее рассчитать расстояние залипания.
Круг. Круг в режиме фиксации на экране проходит расстояние до квадрата. После этого эффект фиксации пропадает и обе фигуры скроллятся как обычно.
По сути, круг должен добраться до положения квадрата, но остановиться выше, чтобы зафиксироваться рядом.
Что такое trigger offset в тильде
1. Начнем с настройки Trigger offset / Точки начала анимации.
Точка отсчитывается относительно выбранной нами области, Window center.
Начните с верхнего объекта. Так удобнее рассчитать точки начала анимации для остальных. У него точка начала анимацииточка равна 0px. Это значит, что первый объект залипнет точно по центру экрана.
Нижний объект должен залипнуть когда коснется верхнего. Это значит, что его точка начала анимации будет ниже на высоту первого объекта. Ставим отступ100px.
2. Настроим Distance / Дистанцию.
Это то расстояние, которое должен пройти объект в режиие фиксирования. Начните настройку анимации с нижнего объекта. Так вам будет удобнее рассчитать расстояние залипания.
Круг. Круг в режиме фиксации на экране проходит расстояние до квадрата. После этого эффект фиксации пропадает и обе фигуры скроллятся как обычно.
По сути, круг должен добраться до положения квадрата, но остановиться выше, чтобы зафиксироваться рядом.
СБС анимация в Тильде
Содержание
Виды step-by-step анимации в Tilda
В Тильде, есть несколько видов step-by-step анимации. Перечислю их:
Давайте по порядку разберем каждый из видов
Объект анимируется, если находится на экране
Например, вы поставили, что анимация начнет воспроизводиться, когда элемент будет вверху и поставили Trigger Offset на 150, значит анимация сработает, когда предмет будет не в самом верху, а раньше на 150 пикселей
Какие настройки тут есть
Duration — длительность выполнения одного шага в секундах
Move X,Y — на сколько пикселей от стартового положения, будет смещен объект по оси х (первое поле) и по оси у (второе поле)
Scale X, Y — увеличение или уменьшение объекта, 100% реальный размер, в большую или меньшую сторону будет, соответственно, увеличиваться или уменьшаться объект.
Лайфхак. Если нажать мышью на Differ X, Y, то появится еще одно поле, и можно будет регулировать изменение размера разных сторон, то есть не только пропорциональное изменение
Opacity — тут все просто. Этот бегунок меняет прозрачность объекта
Rotate — поворот объекта по часовой или против часовой стрелки
Easing — интересный параметр, он отвечает за замедление темпа и добавляет «хаосности» анимации. (параметр elasticFin)
Delay — это пауза, в сек. То есть задержка в анимации. Если вы поставите этот параметр на 1 секунду, то анимация начнет проигрываться через 1 сек.
Эти настройки относятся только к первому виду анимации «Объект анимируется, если находится на экране»
Второй тип анимации:
Объект анимируется, если мышью нажать/навести на триггер
Вид анимации, когда мы хотим, например, чтобы при нажатии на предмет, происходило что-то на экране. Нажали на шэйп, а он передвинулся в другое место. Тут в принципе ограничивается все только вашей фантазией 🙂 На этой странице, есть пример такой анимации
Теперь по параметрам
Loop — это зацикливание анимации, то есть нужно повторять или нет
Trigger — наиважнейший параметр. Триггером обозначаем тот объект, при клике или наведении на который, у нас будет воспроизводиться анимация.
Триггеров может быть несколько.
Steps — это шаги, их может быть неограниченное кол-во.
Настройки тут такие же, как и в первом типе анимации
Переходим к заключительному виду анимации
Объект анимируется по скроллу
Этот вид анимации, для меня самый интересный. С помощью этого вида, можно сделать эффект горизонтального скролла на сайте. Когда скроллишь сайт и кажется, что все идет не снизу вверх, а справа налево. (про это рассказывать здесь не буду, эта тема достойна отдельного поста.
Расскажу, о более простых вещах. И ниже будет несколько примеров.
Суть анимации, когда скроллишь сайт, происходит анимация нашего предмета. Мы можем делать: перемещение, уменьшение, кручение, менять прозрачность объекта, а также его фиксацию по отношению к другим объектам.
Настройки такие же, кроме пункта Easing, за место него есть Fix, это зафиксировать объект относительно других
Например, у нас есть жирный заголовок слева и немного контента (текст, фото) справа.
Мы хотим сделать, чтобы наш заголовок был справа и когда шел контент, заголовок был зафиксирован, пока идет текст и фотки слева. Легко)
Базовая и пошаговая анимация в Тильда [простым языком]
Привет, друзья! На связи Евгений Тридчиков и в этом видео мы разберем виды анимации в Тильда.
Перемещаемся на тестовую страницу. Во-первых, как видите, у готовых блоков есть базовые настройки анимации. Это простые эффекты для текста, кнопок, которые вы можете изучить на досуге. Не будем на этом останавливаться.
Анимация готового блока Тильда
Переходим в редактирование зеро блока, выделим элемент, опции, скролл вниз. И здесь нас интересует две последние панели настроек. Это базовая и пошаговая анимация.
Базовая и пошаговая анимация в нулевом блоке
Базовая анимация позволяет настроить эффект появления элемента на экране, параллакс эффект и установить фиксированное положение элемента.
Базовая анимация нулевого блока
Среди эффектов появления: слева, справа, снизу, сверху и увеличение. При выборе определенного эффекта появляются дополнительные настройки. Здесь у вас такие возможности, как:
Параллакс
Далее параллакс эффект. Триггером может быть скролл. Здесь мы выбираем скорость движения элемента относительно скорости скролла (в процентах). Триггером может быть и движение курсора. Тогда мы выбираем смещение элемента по оси Х и У относительно местоположения курсора на экране (в пикселях).
Базовая анимация в нулевом блоке Тильда
Фиксирование
Далее фиксация элемента относительно экрана: вверх, центр или низ. Здесь можно добавить расстояние между элементом и выбранным краем экрана. А также указать расстояние в пикселях, которое вы будете скролить и элемент будет сохранять фиксированное положение.
Обратите внимание, что работу параллакса и фиксированной анимации вы не можете проверить в режиме редактирования.
Вам нужно сохраниться, выйти и запустить режим превью. Это хорошо, потому что только попытками вы поймете логику работы.
Пошаговая анимация нулевого блока
Базовая анимация это прикольно, но самые интересные и вау-эффекты достигаются за счет пошаговой анимации. Обратите внимание, что пошаговая анимация замещает базовую.
Триггер пошаговой анимации в Тильда
Жмем добавить и выбираем триггер для начала анимации: появление элемента на экране, появление блока на экране, скролл, ховер, клик.
Далее вы можете уточнить триггер с помощью расстояния до края экрана, выбрать зацикливание анимации, протестировать анимацию. Ниже, собственно, шаги анимации, то есть сам сценарий.
А внизу подсказка о том, что можно изменить состояние элемента по умолчанию с помощью первого шага, где следует задать duration (продолжительность анимации) равным 0.
Жмем добавить первый шаг. Перед вами настройки анимации, среди которых:
Для начала я рекомендую определить сценарий, затем разбить его на шаги, и задать свойства элемента на каждом шаге. А поможет вам в этом супер крутой учебник пошаговой анимации от Тильда.
Здесь представлены пошаговые инструкции около 20 самых популярных сценариев. Тут и ховер для карточек, и зацикленный кораблик на волнах, и сборка композиции из разных элементов – в общем все, что хотите.
Сейчас вам нужно уделить пару часов этим инструкциям, повторить у себя в проекте и буквально за один день вы освоите пошаговую анимацию в Тильда.
Смотреть видео
В следующем уроке мы разберем настройку целей в Яндекс Метрике и Google Analytics для форм на Тильде. Если видео получилось полезным, поделитесь с коллегами. С вами был Евгений Тридчиков, и я желаю вам великолепного дня!
Тильда: полный гайд
Чтобы вы не потерялись в количестве информации, вот маленькая навигация по статье: в начале рассказываем, что такое конструктор сайтов, потом говорим про основные блоки и контент, учимся настраивать их. Рассказываем про заголовки, разделители, шрифты, галереи, изображения и иконки. После обсуждаем меню, а в конце учимся работать с zero блоком и анимацией. Если вы ищете что-то конкретное — пролистывайте до нужного раздела и разбирайтесь.
Конструктор сайтов – платформа, которая позволяет создать сайт, не вникая в специфику технической терминологии и программирования. Нам не нужно специально писать код: мы просто собираем текст из заранее подготовленных блоков и оформляем их.
Конструктор сайтов необходим, когда нужно сделать работу быстро, дёшево и самостоятельно. Основное ограничение на платформе – функционал, который не потянет крупный портал. Например, Тильда позволяет создать сайт лишь на 500 страниц. Этого хватит для простого сайта: блога, интернет магазина, лэндинга, визитки.
Тильда – популярный в России конструктор сайтов. Она хороша дизайном: благодаря её интерфейсу мы можем использовать готовые наборы цветов, шрифтов, изображений. Ещё одна особенность: каждая страничка – отдельный сайт внутри блочной системы. Блоки страниц можно копировать, создав дубликат.
Основной функционал в Тильде ограничивается набором базовых блоков, с помощью которых мы можем создать меню, галерею, обложки, слайдер и др. Формы взаимодействия с пользователем: СРМ системы, платёжные системы, формы приёма данных, которые можем интегрировать с мессенджерами и Google формами.
При помощи базового набора мы можем создать страничку практически с любым контентом, структурировать его по нашему желанию и адаптировать его под мобильное устройство. По каждой тематике есть несколько шаблонов, которые состоят из готовых блоков, подобранных картинок, цветов и шрифтов. Их можно менять, дублировать, удалять и передвигать местами. Тильда позволяет менять расположение, отступы, заголовки, выравнивания, размеры и цвета шрифтов, оформлять картинки, меняя фоны. А специальный блок Zero воплотит многие наши фантазии.
Основная концепция конструктора сайтов – контент важнее, чем дизайн. Главное: донести смысл конечного продукта, чтобы появилось желание его купить, испытать вау эффект от знакомства с ним. А дизайн – это оформление продукта.
Основные блоки
Интерфейс Тильды состоит из двух частей: редактирование контента и настройки блоков.
В Тильде блоки строятся на основе 12-ти колоночной сетки, по которой располагаются их элементы: заголовки, картинки, кнопки, текстовые блоки. Блок настроек контролирует внешний вид: цвет фона, размер отступов, шрифтов (размер, цвет), анимация, тег заголовка для лучшего определения поисковыми системами.
Блоки можно менять их местами, добавлять/удалять их, делать невидимыми или разрешать отображение на определенных экранах. Возможно создать два одинаковых блока с разной информацией и демонстрировать один на смартфонах, а другой – на экранах компьютеров. Также можно настроить ширину блока и анимацию его появления. Для логического структурирования дополнительно с заголовками используйте разделители (линии, черточки, различные иконки, цифры).
Категории блоков
Обложка: с него начинаются большинство страниц. Состоит из картинки или фонового видео, заголовка и подзаголовка, текста, кнопки, стрелки перехода. Дополнительный функционал: форма записи, слайдер или таймер.
О проекте: текстовый блок, иногда сопровождающийся ссылкой.
Текстовые: любой текстовый контент с указанием заголовков, подзаголовков, готового фона, раскрытием списков, иконками и другие плюшки.
С изображениями: графический контент — это настроение нашей страницы, визуальные образы. Рамочное изображение, полноэкранное, комбинации картинки и текста, галереи.
Ключевая фраза: выделение важной цитаты, заголовка, основной мысли.
Колонки: структурирование информации по нескольким вертикальным колонкам.
Меню: навигация по созданной странице. Кнопки, элементы, комбинации с логотипом, элементы переключения языка, контакты, кнопки социальных сетей.
Список страниц: раздел новостей = страниц, которые уже есть в нашем сайте.
Подвал (футер): оформление нижней части сайта/страницы. Контакты, ссылки на социальные сети, обратная связь, кнопки для связи, адрес.
Видео: вставка видео с публичных сервисов.
Кнопки: выбор кнопок и форм. Заказ звонка/сообщения, голосование.
Команда: список людей в команде проекта.
Другое: разные интересности Тильды. HTML – любой внешний виджет, якорная ссылка – место, до которого будет происходить скрол при нажатии на ссылку/кнопку.
Zero: снимает ограничений блока, полёт фантазии.
Контент
Перед тем, как делать наполнение сайта, напомните себе об этом и этом.
Редактирование контента происходит двумя способами: через блок «Контент» и визуально.
На встроенном редакторе Тильды доступно редактирование загруженной нами картинки: добавить текст, дорисовать детали, применить фильтры.
Редактируйте через блок «Контент» изображения и перетаскивайте их, чтобы менять местами, загружать новые и удалять старые. Нажимаем на кнопочку «Сохранить и закрыть», чтобы ничего не потерять, а перед этим отменяем ошибочные действия.
К изображениям можно добавить текст, который будет использоваться для SEO, но некоторые виды текста отображаются на картинках и в самом слайдере.
Блоки в Тильде как «Список страниц» составляются из других страниц сайта. Не получится указать в нужном блоке нужную страницу, но возможно добавить: раздел «Сетка блога» → «Список страниц», зайти в контент и указать страницы сайта. При этом автоматически подтянутся изображения бейджиков страниц, заголовки, подзаголовки и другие.
Настройка блоков
Доступны настройки ширины, отступа слева и выравнивание. Когда мы меняем ширину блока, уменьшая количество колонок, наш блок становится уже.
В «Типографике» – отображение текста по его элементам; в «Анимации» – появление текста при загрузке; в самом конце – цвет фона для всего блока. Укажите, на каких устройствах будет отображаться данный блок. Любой блок можно конвертировать в Zero блок.
Настройте заголовок: выравнивание, изменение количества блоков, размера изображения иконки, вертикальных отступов между элементами.
Добавляем кнопку через меню «Контент» и настраиваем её возможности в меню «Настройка». Блок «Преимущества» позволит гибко настроить анимацию элементов.
Чтобы сделать скрол более интересным, включаем режим параллакс (фон скролится медленнее чем контент на блоке) или эффект с фиксацией при скроле.
Для лучшего прочтения текста на фоне изображения нам доступны фильтры для накладывания сверху. Они настраиваются через цвет фильтра и прозрачность. Чем больше процент, тем насыщеннее тон.
В настройках внешнего вида «Галереи» мы можем настроить ширину картинки в колонках (максимально по сетке 12 колонок). Если у картинок разный размер, можно изменить масштабирование изображения и поместить его внутри блока, пропорции не будут нарушены.
Заголовки
Заголовки в Тильде бывают двух видов: встроенные в блоки заголовки, неотделимые от основного контента, и отдельные заголовки. В отдельных блоках главные элементы – заголовок, подзаголовок и описание или легенда. Они нужны для структурирования информации на сайте.
В настройках доступно регулирование ширины блока, отступа слева, выравнивание, добавление СЕО тега для правильной индексации сайта поисковыми системами. От последовательности заголовка зависит его тег: первый заголовок – Н1, второй и последующие (их может быть несколько на странице) – Н2, и третий тип заголовков – Н3, когда их много на странице.
Работа с отступами легенды зонирует информацию на сайте. Желательно выставлять одинаковые отступы по сайту, иначе смотрится не аккуратно.
Настройки анимации разрешают выбрать эффекты, которые возникают при появлении заголовка на экране. Анимация делает сайт контрастным и привлекает внимание.
Разделители
Разделители – инструмент для зонирования контента и блоков. Позволяют избежать цветового разделения блоков. При использовании разделителей можно оставить цветовую палитру блоков одинаковой.
Линия. В настройках регулируем её ширину, отступ от левого края, непрозрачность, отступы, фон, видимость на разных устройствах.
Тонкая вертикальная линия. Визуально связывает элементы. Например, переход от одного этапа к другому.
Цифра в круге или цифра в круге и линия. Деление на последовательные этапы. В настройках меняем цвет цифры в круге, начальное значение цифры, цвет самого круга, цвет и ширину линии.
Зигзаг, Стрелка и Скос. Обратите внимание на отступы между блоками для соблюдения симметричности.
Шрифты
Выделив текст, мы можем применить или изменить шрифт с его настройками. Все шрифты поддерживают 7 начертаний: тонкое, нормальное, полужирное и жирное.
При использовании функции «Типограф» появляются символы связки текста. Например, #nbsp –вставка неразрывного пробела.
В Тильде есть несколько текстовых редакторов. Первый появляется при выделении текста на экране. Второй – в настройках контента текстового редактора, тут можно добавлять нумерованный и табулированный списки. В обоих редакторах есть все необходимые настройки: межстрочный интервал, цвет, шрифт, выравнивание, добавление ссылки и другое.
Галереи и иконки
Слайдер – элемент, листающий фотографии по одной. В настройках можно менять изображения, добавлять текстовое описание и заменять изображения на видео. Масштабирование корректно расположит изображения разного формата. Внутри галереи настройте управляющие элементы (стрелки, кружки, точки), размеры и толщину стрелок.
Две колонки. Коллаж изображений, при клике их можно увеличить.
Одна строка. Все изображения в одной строке, независимо от их количества.
Сравнение до/после. С помощью подвижного бегунка видим, как изменилось наше изображение.
Иконки. Используются в блоке «Преимущества». Есть встроенные чёрно-белые иконки библиотеки, но можно загрузить и свои. Настройки иконок: изменить размер, применить анимацию, дополнительно – «Квадратная картинка» и «Картинка в кружке» обрезают горизонтальную картинку под нужную геометрическую фигуру.
Важно: при использовании иконок низкого разрешения (ниже 128 пикселей) плохое качество заметно. Лучше использовать иконки в векторном формате SVG или PNG с прозрачным фоном.
Работа с изображениями
Внутренний редактор поможет обрезать картинку в необходимой пропорции. Встроены инструменты отражения: отразить по вертикали/горизонтали картинку, повернуть на необходимый угол, нанести поверх нашей картинки текст, применить фильтры (яркость, контрастность, шумы и пикселизация).
Важно: максимальное изображение в Тильде – 2000 пикселей в ширину (оптимально для обложки 2000х1033 пикселя). Большая картинка просто не поместится в экран или будет слишком много весить.
При выборе изображений помните еще и о их содержании: читать подробнее тут.
Соблюдайте авторские права: не все изображения, размещённые в интернете, разрешено использовать бесплатно. Для поиска бесплатных картинок пользуйтесь специальными стоковыми сервисами, о них читайте тут.
Для большего драйва сайта используйте анимацию при помощи встроенных блоков конструктора и разных функций.
Обложки. В одноименном меню нам доступно несколько вариантов. Мы можем поставить картинку/видео на задний фон нашей обложки и применить эффекты. Настройте цвет фильтра в начале и в конце, чтобы создать свой неповторимый стиль.
При редактировании контента назначьте ссылки перехода для перемещения из пунктов меню. Открыть страничку при переходе по ссылке можно как в нашем окне, так и в новом, что актуально для перехода по внешним ссылкам.
Если ссылка начинается со слеша («/»), значит она будет идти от корня сайта. Если необходимо обратиться к определенному блоку другой страницы, то следует указать полную её ссылку и название блока через решетку.
Все элементы должны быть кликабельны и не уходить в пустоту, будь то логотип или надпись.
Также важен размер и цвет шрифта: слишком мелкий шрифт и неприглядный цвет не читается, крупный и контрастный шрифт выглядит ужасно. Ищите разумные компромиссы.
Если меню небольшое рассмотрите выравнивание по краю. Можно менять расстояние между пунктами в настройках «Пункты меню», сделать их заглавными буквами.
Сделайте активный цвет меню другим цветом, тогда одноименный блок меню будет выделен выбранным цветом.
Обложка, которая занимает 100% высоты устройства, выходит за рамки смартфона.
Zero блок
Zero блок поможет создать собственный блок для реализации наших фантазий. Функциональное меню позволяет разместить несколько элементов: текст, картинка, графический элемент, кнопка, видео, подсказку, Html код, и настраиваемую форму.
По умолчанию на пустом экране нам доступно несколько базовых настроек: высота контейнера, центрирование и выравнивание по сетке, цвет и изображение фона, фильтр на фон, обрезка боковых элементов по сетки и другое.
Текст. Слева вверху кнопочка «+» – добавляем блок, дважды кликаем для текста, который можно редактировать и настраивать непосредственно на экране. Кликнув один раз на блок, нажав кнопочку «Tab», справа появится меню настроек. Задать высоту и ширину блока можно как при помощи мышки, так и в параметрах настроек.
Настройки текста: выравнивание внутри блока, цвет, размер, шрифт, его прозрачность, жирность и межстрочный/межбуквенный интервал. Также можно повернуть текст на нужный угол, сделать ранжирование по слоям, скопировать, удалить наш элемент или заблокировать. Заблокированный элемент не позволяет нам случайно сдвинуть его. Мы можем присвоить тексту внешнюю/внутреннюю ссылку для перехода с заданием тега согласно ранжированию – удобно для поисковиков.
Изображение. Загрузить картинку с внутреннего ресурса или по ссылке с внешнего источника можно тремя способами: кликнуть по блоку, нажать кнопочку в настройках «Upload file» или просто перетащить изображение. При изменении размера изображения длина и ширина пропорционально меняется. Кнопочка «Original size» вернёт картинку к первоначальному размеру. Дополнительно к изображению можно добавить обводку, изменить её размер, цвет, скруглить её, применить тень. Доступно: увеличение изображения (опция ZOOMABLE) – при клике всплывёт увеличенная копия изображения, LAZYLOAD – загрузка изображения при скролле для ускорения загрузки сайта.
При работе с Zero блоком у нас доступны горячие клавиши: Ctrl+C – копировать, Ctrl+V – вставить, Ctrl+Z – отменить действие.
Форма. Графические элементы, представленные в виде прямоугольника, круга и линии. Большинство настроек как у текстового блока (поворот, прозрачность, цвет, ранжирование по слоям и т.д.).
Кнопка. Привязка действия: переход по ссылке на блок/внешний ресурс. Мы можем изменить форму, скруглить её, сделать обводку, дать название, присвоить ссылку, задать открытие (новое окно или переход в текущем). Также можно поменять цвет кнопки, шрифт (размер, цвет). Настройки тени применимы как у блока «Изображение».
Видео. Загружаем видео с Youtube. Можно изменить размер блока, сделать его прямоугольным или квадратным. Функция AUTOPLAY – автоматическое включение, как только пользователь докрутит скролл до блока, MUTE – включение/отключение звука, LOOP – повторение видео. Чтобы показать нужный фрагмент из большого ролика, задайте стартовые и конечные секунды. Для обложки загрузите изображение.
Элемент TOOLTIP – создание всплывающего меню-подсказки. Здесь можно настроить его шрифт, изменить прозрачность и тень самого элемента. Настройка ICON изменит внешний вид инструмента, BORDER и BRDR.SIZE настроит цвет и толщину границы. TIP SETTINGS – настройки всплывающего элемента, POSITION – размещение всплывания относительно самого элемента, SHOW – появление тени, BG. COLOR – цвет фона, CORNERS RADIUS – круглые углы, SHADOW BLUR – глубина тени, WIDTH – длина всплывающего текста, TIP IMAGE – подгруз картинки, если мало текста во всплывающем элементе.
При помощи вставки Html кода можно поместить, например, какой-то код виджета и интегрировать его в нашу страничку. Инструмент форма вы можете освоить самостоятельно.
Zero блок: базовая анимация
BASIC ANIMATION: эффекты базовой анимации в Zero блоке одинаковы для всех элементов.
Выбор каждого варианта анимации предлагает свои тонкие настройки. Например, выбор в качестве анимации появления (ANIMATION/Fade In) позволяет настроить длительность (DURATION), отложенное время появления (DELAY), расстояние в пикселях от нижнего края экрана, при котором элемент появляется на странице (TRIGGER OFFSET), а также задержку элемента на месте при скролле (PARALLAX) – чем выше значение скорости (SPEED), тем быстрее элемент будет уходить в противоположную сторону от нашего скролла. За счет такого движения мы можем создавать объемную графику из разных слоев (текст, картинки, кнопки). При эффекте параллакса наш элемент начинает двигаться по экрану в зависимости от движения мышкой.
Также доступна фиксация элемента с дополнительными настройками (FIXING): TRIGGER OFFSET – отвечает, с какого момента начинать фиксировать элемент при скролле; DISTANCE – дистанция, которую мы можем проскроллить до того момента, как элемент перестанет двигаться совсем.
Раньше анимация не проигрывалась на мобильном устройстве, но теперь ее можно включить. Создайте анимацию для десктопной версии сайта, переключитесь в режим экрана планшета и нажмите кнопку «Switch on». Анимация будет работать на всех портативных устройствах. Адаптируйте движения анимации под разные размеры экранов. Триггер анимации будет одинаковым для всех устройств.
Как будет отображаться блок на разных устройствах, можно увидеть с помощью переключателя вверху. Вносимые изменения применяются к блокам при выборе редактировании устройств, на котором будет отображаться блок, справа налево, т.е. если мы вносим изменения в правом блоке они отображаются и в левом. В обратном порядке изменения, вносимые в текущем окне, в устройстве справа, от выбранного нами, отображаться не будут.
Zero блок: пошаговая анимация
Чтобы перейти к пошаговой анимации, мы должны при активном элементе (клик на нашу картинку) нажать кнопочку ADD на блоке STEP BY STEP ANIMATION внизу справа страницы.
В новом меню нам предлагается выбрать триггер (EVENT) – спусковой крючок для запуска анимации. Это действие, при котором будет происходить пошаговая анимация. Выбор у нас достаточный: element on Screen (элемент появляется на экране), block on Screen (блок появляется на экране), on Scroll (по скроллу), on Hover (по наведению мышкой на элемент), on Click (по клику мышкой на элемент).
Рассмотрим некоторые настройки. Выберем триггер element on Screen. Настройка старта триггера предлагает выбрать, в какой момент будет срабатывать анимация, когда элемент появится в верхней части экрана, средней или нижней части экрана, TRIGGER OFFSET позволяет выбрать расстояние отступа от выбранной части экрана, а LOOP – зациклить выполнение анимации.
Следующая основная настройка — добавление шага (STEPS). Нажав на кнопочку +ADD STEP, мы добавляем наш первый шаг. По умолчанию местонахождение нашего элемента – нулевой шаг, а его прозрачность и размер приняты за 100%.
С добавлением первого шага рамка вокруг нашего объекта становится другого цвета. Взяв за объект мышкой, мы можем перенести его на какое-то расстояние. Меняя активность шага (кликая мышкой на Start, Step 1 и т.д.), мы следим за нахождением объекта и его настройками.
При создании нового шага у нас появляется дополнительное меню настроек: время, за которое будет совершен шаг (DURATION), координаты перемещения (MOVE X,Y), процент увеличения/уменьшения элемента к концу этого шага (SCALE X,Y, кнопочка DEFFER X,Y пропорционально изменит размер картинки), значение прозрачности элемента к концу шага (OPACITY), поворот элемента в градусах к концу шага (ROTATE).
Доступны 5 различных эффектов исчезновения объекта (EASING): линейная (linear), разгон в начале и постоянная скорость анимации (easeIn), ярко выраженное быстрое движение в начале и плавная остановка движения в конце анимации (easeOut), плавное ускорении элемента в начале и замедлении в конце пути (easelnOut), небольшой отскок элемента в конце анимации (elasticFin), отложенный старт при наведении в секундах (DELAY). Данные настройки анимации применимы ко всем элементам и триггерам.
Важный момент: любой из представленных блоков можно перевести в настройках в ZERO блок и настроить его.
Не бойтесь экспериментировать – это интересно. Остались вопросы? Пиши в комментарии или в сообщения сообщества. Разберем, поможем, расскажем.
