Почему не работает анимация тильда

Zero Block: пошаговая анимация

Внутри Zero Block есть два режима анимации:

1) Basic Animation — простая анимация. Это готовые, самые часто используемые эффекты, например, эффект появления (через прозрачность, снизу вверх, справа налево и т.д.), параллакс и фиксация. Их достаточно в 90% случаев.

2) Step-by-step Animation — пошаговая анимация. Позволяет реализовать яркие, креативные идеи по вашему сценарию.

Нажмите «Редактировать блок» в левом верхнем углу блока, чтобы перейти в режим редактирования.

Добавьте новый элемент, выделите его, откройте настройки, пролистайте до раздела Step by Step Animation и нажмите кнопку Add.

У начала анимации есть дополнительные опции Start Trigger, Loop и Trigger Offset.

• Start Trigger — это то, к чему будет привязана анимация или что будет являться ее триггером. Есть выбор из трех областей — верхней границы (On Window Top), центра экрана (On Window Center) и нижней границы (On Window Bottom);
• Trigger Offset — это смещение начала анимации объекта относительно выбранного Window Top / Window Center / Window Bottom;
• Loop — это опция зацикливания анимации.

Первый шаг, задан по умолчанию — это Start. Далее нужно добавлять шаги и на каждом шаге менять свойства элемента. Так элемент будет меняться.

Чтобы добавить шаг, нажмите на кнопку Add Step.

У каждого шага есть набор свойств: Duration, Move, Scale, Opacity, Rotate, Easing и Delay.

Duration — длина анимации в секундах;
Move — координаты, куда передвигается элемент относительно начального расположения. Их можно задать как значениями, так и передвинуть элемент;
Scale — процент увеличения или уменьшения элемента к концу этого шага;
Opacity — значение прозрачности элемента к концу шага;
Rotate — поворот элемента в градусах к концу шага;
Easing — выбор эффекта выполнения анимации: Linear — это линейное выполнение анимации, easeIn, easeOut, easeInOut — это замедление в начале, конце или в начале и конце анимации, bounceFin — это небольшой отскок элемента в конце анимации;
Delay — задержка перед выполнением анимации.

Источник

Почему не работает анимация тильда

1. Начнем с настройки Trigger offset / Точки начала анимации.

Точка отсчитывается относительно выбранной нами области, Window center.

Начните с верхнего объекта. Так удобнее рассчитать точки начала анимации для остальных. У него точка начала анимацииточка равна 0px. Это значит, что первый объект залипнет точно по центру экрана.

Нижний объект должен залипнуть когда коснется верхнего. Это значит, что его точка начала анимации будет ниже на высоту первого объекта. Ставим отступ100px.

2. Настроим Distance / Дистанцию.

Это то расстояние, которое должен пройти объект в режиие фиксирования. Начните настройку анимации с нижнего объекта. Так вам будет удобнее рассчитать расстояние залипания.

Круг. Круг в режиме фиксации на экране проходит расстояние до квадрата. После этого эффект фиксации пропадает и обе фигуры скроллятся как обычно.

По сути, круг должен добраться до положения квадрата, но остановиться выше, чтобы зафиксироваться рядом.

Значит это 400px — 100px (высота квадрата) = 300px

Источник

Tilda выпустила учебник по веб-анимации

Бесплатный учебник из 16 уроков о том, как использовать анимацию в веб-проектах.

Из учебника можно узнать, как применять на сайтах эффекты анимации. Как с их помощью привлекать внимание пользователя к важному контенту и элементам интерфейса: кнопкам, пунктам меню, активным ссылкам, плиткам.

Все примеры из учебника можно повторить в конструкторе Tilda — в каждом уроке есть видеоинструкция, которая поможет разобраться, как создать анимацию.

В первом уроке показано, как анимировать элементы в обложках. Для каждого примера внутри урока описаны настройки, чтобы можно было повторить эффекты.

В виде списков и карточек можно оформить отзывы, услуги, кейсы, преимущества, команду, FAQ. Урок посвящён тому, как привлечь внимание к элементам этих блоков с помощью анимации появления.

Hover-эффект — это анимация элемента при наведении. Помогает обозначить, что с карточками и плитками на странице можно взаимодействовать. Популярные Hover-эффекты для плиток: затемнение фильтра, появление тени, появление контента, изменение масштаба, смена изображения, смещение.

Хороший приём, чтобы продемонстрировать, из чего состоит продукт. В примере элементы перемещаются с изменением размера при скролле.

Перемещая элемент вдоль экрана по скроллу, можно управлять вниманием посетителя сайта.

Параллакс позволяет добиться эффекта глубины при просмотре страницы благодаря разной скорости движения элементов.

Все уроки и примеры учебника по веб-анимации — по ссылке.

Почему-то вспомнилось обилие анимации и всяких вылетающих плашек в презентациях школьников и студентов. +5 к привлекательности. Они так думали.

Да. Когда анимация используется часто и неуместно, это только раздражает. Но если использовать ее в меру — это отличный способ акцентировать внимание.

На сайте Apple, например, шикарнейший параллакс.

Да я не против) Я просто про презентации.

Учебник как сделать некоторую анимацию в тильде, но не «Учебник по веб-анимации»

Тильда вообще молодцы. Столько полезного у них блоге да еще и бесплатно

Анимация должна быть оправданной, просто что б прикольно — выглядит прикольно, но не всегда уместно.

В какой-то момент казалось, что сайт начал как то медленнее работать из-за этой анимации((
Надо понимать, на что идёшь ради красоты..

Любая анимация забирает на себя ресурсы браузера. При умеренном использовании, это не будет заметно. Еще анимация может тормозить сильнее, если на сайте включен вебвизор Яндекс Метрики. Он ловит все изменения на экране и тоже отнимает ресурсы.

По первому абзацу создается впечатление, что это учебник по созданию анимаций, а не инструкция по нажатию кнопочек в админке тильды.

Но видеотуториалы — это только дополнение к приемам из уроков, чтобы показать, как повторить анимацию из примеров в Тильде.

Сегодня на всех сайта «Комитета» картинки сюоят вреия от времени. Почему-то.

А если ещё раз такое будет, сможете скинуть скриншот ошибок из консоли браузера на support@cmtt.ru или в телеграм @ilya0, пожалуйста?

у меня такое часто. из-за этого стал редко посещать ресурс.
странно, но сейчас все ок

Совсем скоро стартует AI Journey — международная конференция по искусственному интеллекту и анализу данных. Её проводит Сбер, и в этом году она пройдёт в онлайн-формате. Зарегистрироваться можно уже сейчас, а мы пока расскажем, почему мероприятие будет интересно всем: от учёных до школьников.

11 августа 2021 смотрю презентацию Samsung Galaxy Z Fold3 5G, после чего решаю что надо брать, ибо девайс интересный, а мне давно пора было поменять свой рабочий телефон. OMG, давно я так не ошибался…

Подборка лучших проектов по рейтингу подготовлена каналом @vchunt, где каждую неделю появляется топ-3 стартапа из «Трибуны». Подписывайтесь, чтобы поддержать русскоязычных фаундеров и не пропустить отличные продукты!

Совет по туризму Вены завел аккаунт OnlyFans, заявив, что эта платформа остается единственным местом, где обнаженные произведения искусства из городских музеев могут получить «свободу, которую они заслуживают».

Сколько пользователей затронула проблема — неизвестно.

В автоматах продают не только игрушки для детей, но и работающие мини-технику, мебель и посуду. Зачем компании сертифицируют псевдоутварь и можно ли на ней заработать — в пересказе NYT.

ИТ-специалисты поделились своими историями, а эксперт по облачному резервному копированию их прокомментировал.

На «Неделях российского бизнеса» прошел Форум по креативным индустриям и интеллектуальной собственности, где представители власти, бизнеса и институтов развития обсудили проблемы защиты интеллектуальной собственности в России, введения третейских судов и регулирования оборота продуктов, созданных искусственным интеллектом.

Источник

Просим обратить внимание: техническая поддержка Tilda Publishing не осуществляет поддержку связанную с работой кода

1) Создаем в редакторе zero блока элемент и настраиваем ему анимацию с настройкой EVENT: On click.

2) Создаем элемент, при наведении на который будет происходить анимация на первом элементе.

3) Добавляем код 1 в блок T123.

4) Добавляем код 2 в блок T123 и указываем в нем:
Класс элемента, на котором задали анимацию в шаге 1;
Класс элемента, при наведение на который будет происходить анимация;
Суммарное время анимации в секундах, которое указали в редакторе анимации.

5) Если нужно добавить еще одну зависимую анимацию, нужно копировать только код 2.

Зависимая анимация при наведении

Зависимая анимация нужна когда при нажатии или наведении на один элемент, запускается анимация других элементов на экране. Например, при наведении на кнопку, позади неё происходит анимация.

При наведении курсора на элемент происходит анимация, а когда курсор покидает область элемента, анимация проигрывается в исходное положение. В мобильной версии работает не по наведению, а по нажатию.

time в коде указывает когда элемент может начать проигрывать анимацию обратно. В некоторых случаях, например, при наведении на кнопку рядом с ней происходит анимация нескольких элементов с разным временем, лучше в коде выставить всем время максимальной анимации. Пример:
Шейп 1 — Время анимации 0.7
Шейп 2 — Время анимации 0.4
Шейп 3 — Время анимации 1
Тут лучше выставить всем time = 1;

Инструкция

1) Создаем в редакторе zero блока элемент и настраиваем ему анимацию с настройкой EVENT: On click.

2) Создаем элемент, при наведении на который будет происходить анимация на первом элементе.

3) Добавляем код 1 в блок T123.

4) Добавляем код 2 в блок T123 и указываем в нем:
Класс элемента, на котором задали анимацию в шаге 1;
Класс элемента, при клике на который будет происходить анимация;
Суммарное время анимации в секундах, которое указали в редакторе анимации.

5) Если нужно добавить еще одну зависимую анимацию, нужно копировать только код 2.

Зависимая анимация нужна когда при клике или наведении на один элемент, запускается анимация других элементов на экране. Например, при наведении на кнопку, позади неё происходит анимация.

При клике на элемент происходит анимация, и при повторном клике, анимация проигрывается в исходное положение.

time в коде указывает когда элемент может начать проигрывать анимацию обратно. В некоторых случаях, например, при наведении на кнопку рядом с ней происходит анимация нескольких элементов с разным временем, лучше в коде выставить всем время максимальной анимации. Пример:
Шейп 1 — Время анимации 0.7
Шейп 2 — Время анимации 0.4
Шейп 3 — Время анимации 1
Тут лучше выставить всем time = 1;

Источник

Учимся работать с Tilda: создание отзывчивого дизайна в Zero-блоках

Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

Типовые блоки «Тильды» сами подстраиваются под разные экраны — будь то телефон или Mac Pro. Но как только собираешь свой сайт на Zero-блоках, вёрстка плывёт. В этом уроке мы сверстаем несколько простых и красивых страниц сайта, которые будут одинаково хорошо выглядеть на всех устройствах.

Автор статей по дизайну. В веб-дизайн пришел в 2013 году, осознанно начал заниматься с 2015 года. Параллельно освоил верстку. Время от времени публикую переводы на хабре.

Что такое отзывчивый дизайн

Отзывчивый дизайн — это когда элементы сайта сами перераспределяются по экрану и подстраиваются под любое устройство. На «Тильде» необязательно создавать уникальный дизайн-макет для каждого разрешения — надо только грамотно расставить все элементы.

Сделать отзывчивый дизайн в «Тильде» можно двумя способами:

1. Автоматически. Когда вы используете готовые блоки, а отзывчивая версия уже настроена под все устройства. Их нельзя кастомизировать. Максимум — показать или скрыть на разных разрешениях экрана.
2. Ручной режим. Работает только в Zero-блоках. Макет придётся корректировать под каждое разрешение, зато такой подход даст дизайнеру свободу действий — всё можно настроить очень гибко.

Создаём учебный Zero-блок

Для работы над проектом надо создать Zero-блок.

В настройках блока выставляем параметры как на картинке.

Когда вы создаёте Zero-блок, «Тильда» по умолчанию делает проект для десктопной версии экрана — он считается основным, поэтому вёрстку логичнее начать с него. Поменять экран можно на панели устройств.

Расположение элементов в десктопной версии

Теперь нам надо разместить в Zero-блоке макет — можете использовать свои заготовки или взять за основу проект Moon Tutorial, сайт астрофотографии.

Макет состоит из простых элементов:

• логотип;
• фотография Луны (слайдер);
• номера слайдов от 1 до 7;
• меню;
• блок с описанием фотографии;
• поле с указанием авторских прав;
• фон (цвет фона — #111a30).

Настройки для десктопной версии:

• 800 px по высоте рабочей области (Grid Container) — чтобы было удобнее работать в редакторе;
• 100% высоты экрана (Window Container) — чтобы при публикации макет растягивался на весь экран.

Используйте комбинации клавиш, чтобы перемещаться по рабочей области (а не всему экрану) «Тильды»:

1. Shift + колёсико мыши — перемещение рабочей области по горизонтали.
2. Alt + колёсико мыши — перемещение рабочей области по вертикали.

Макет может занимать много больше места, чем ожидалось, панели будут мешать увидеть и оценить его общий вид. Нажмите Ctrl+ или Ctrl− несколько раз, чтобы уменьшить или увеличить зону рабочей области. При этом элементы окна браузера останутся на своих местах — то есть изменения произойдут только в рабочей области. Это особенность «Тильды». Изменение масштаба в процентах отображается в верхнем левом углу.

Собираем макет для планшета с горизонтальной ориентацией

Горизонтальная версия для планшета почти не отличается от десктопной, поэтому изменений будет немного. Основное отличие — фотография Луны растянется на весь экран. В результате получится вот такой макет.

Перейти с десктопной версии на планшет можно с помощью панели для работы с отзывчивым дизайном — она расположена вверху в центре. Тут есть иконки для основных экранов устройств:

• Десктоп — 1200 х max.
• Планшет горизонтальной ориентации — 960×1200.
• Планшет вертикальной ориентации — 640×960.
• Смартфон в горизонтальном положении — 480×640.
• Смартфон в вертикальном положении — 320×480.

Разрешение экрана можно посмотреть на этой же панели — просто наведите курсор на нужную иконку.

Нажимаем на иконку планшета и переходим в рабочую область экрана планшета — нас встретит такая безрадостная картина.

Практически все элементы в беспорядке — блоки текста уехали вправо за границы экрана рабочей области, меню последовало за ними, нумерация слайдов перекрыла строку авторских прав.

Начинаем исправлять. Для этого задаём глобальные параметры GRID Container Height 640 px. Высоту окна не трогаем, оставляем 100%.

Следующим шагом масштабируем изображение Луны по высоте рабочей области и располагаем по центру.

Переносим логотип ближе к левому краю и выравниваем по вертикальной сетке.

Сиреневая рамка вокруг элемента означает, что объект позиционируется относительно контейнера окна, а синяя рамка — что относительно грид-контейнера.

Переходим к блоку описания изображения.

По идее, текст не должен был сместиться относительно блока. Поэтому заглянем в десктопную версию и посмотрим, почему так произошло. За смещение элементов относительно друг друга и экрана отвечает настройка позиционирования ( Container) на панели Settings. Ищем решение проблемы там.

Выделяем подложку блока описания и переходим на панель настроек. На панели открываем строку Container и смотрим, какие значения указаны для подложки блока описания.

Подложка позиционируется относительно грид-контейнера: по оси X — справа, по оси Y — сверху. Теперь проверяем эти же параметры у текстового блока. Выделяем текст и смотрим на значения.

Сразу видим несоответствие: текст позиционируется по оси X слева, в то время как подложка блока — справа. Меняем значение и проверяем: блоки текста автоматически выравниваются по правому краю.

Теперь необходимо сделать выключку текста влево. Для этого используем инструмент выравнивания элементов на панели настроек и двигаем текстовые блоки немного правее, чтобы они не прилипали к левому краю.

Отлично, в версии для планшета текст больше не съезжает. Этот небольшой лайфхак позволил сократить время и не двигать каждый элемент отдельно — мы быстро скорректировали весь текстовый блок.

Теперь выделите текст вместе с подложкой, переместите на фотографию и выровняйте по сетке.

Осталось выровнять строку копирайта относительно логотипа, поставить на место нумерацию слайдов и сместить меню влево.

Выделяем строку авторских прав, перетаскиваем левее и выше, ставим на одну вертикальную линию с логотипом, а низ ровняем по основанию подложки.

Инструменты выравнивания тут бессильны — не получится автоматически скорректировать расположенный вертикально текст относительно логотипа. Причина проста: контейнер текста располагается горизонтально, а сам текст — вертикально. Но выравнивание идёт относительно контейнера. Значит, этот элемент придётся перетаскивать вручную для каждого типа экрана.

Поэтому выравниваем элемент вручную по сетке. Потом ровняем меню — делаем тот же отступ, что и для логотипа, только справа. Нумерацию слайдера выравниваем по подложке блока описания.

Тут тоже есть нюанс: текст не прилипает к своему контейнеру, а значит, после выравнивания текст будет располагаться чуть выше подложки — хотя формально они находятся на одной высоте. Если такой вариант вас не устраивает — корректируем ручками.

Ещё один важный момент: меню, логотип, чаты и другие функциональные элементы, которые обычно располагаются по краям, старайтесь позиционировать с помощью Window Container. Так с ними будет проще работать на разных экранах.

После всех корректировок и выравниваний элементов относительно друг друга получаем такую картинку.

Закрываем редактор Zero-блока, публикуем и просматриваем страницу.

Конечно, в идеале надо проверить макет на реальном планшете, но его может не оказаться под рукой, да и на этапе разработки это не очень удобно. Поэтому мы используем эмулятор различных устройств и экранов. Вызвать его можно клавишей F12. Другой вариант — щёлкнуть правой кнопкой мыши в любом месте экрана и выбрать пункт « Просмотреть код».

Внизу появится панель разработчика. Я обычно перетаскиваю её слева или справа — так удобнее тестировать вёрстку. Для этого нажмите на троеточие в правой части панели и выберите нужное расположение.

Далее нажмите на иконку экранов и введите нужное разрешение экрана ( 960×640) в центральной панели.

У нас получился добротный макет для планшета с горизонтальной ориентацией экрана.

Собираем макет для планшета с вертикальной ориентацией

Для вертикальной версии планшета макет будет немного отличаться — текстовые блоки с подложкой перенесём влево, строку копирайта — вправо, увеличим нумерацию слайдера и немного увеличим меню и логотип. Результат будет таким.

Возвращаемся в редактор Zero-блока и переходим на версию для планшета с вертикальной ориентацией.

Вот что мы увидим.

Могло быть и хуже. Вот что мы сделаем:

1. Слегка уменьшим плашку с текстом по горизонтали и увеличим по вертикали.
2. Сместим плашку влево.
3. Слово MOON перенесём на следующую строку.
4. Нумерацию слайдера сместим вниз и немного увеличим.
5. Фотографию сдвинем вправо — останется только часть Луны. Так она не будет перекрывать меню и логотип.

Первым делом выставляем нужную высоту в панели настроек. Рекомендую всегда начинать с этого действия — так удобнее работать.

Теперь увеличиваем изображение Луны, чтобы оно было по всей высоте экрана, и выравниваем картинку по левому краю. То, что не входит в основную часть экрана, не будет отображаться на сайте.

Теперь переносим блок с текстом к левому краю и слегка вниз. Подложку блока увеличиваем, нумерацию слайдера ставим под текст, а сам текст на подложке выравниваем по сетке.

Сейчас текст маловат относительно блока — увеличим его. Начинаем с заголовка — Photo Moon. Кликните по нему и перейдите к панели настроек. Напротив Size (размер шрифта) задайте значение 70.

Отлично, заголовок увеличили, но возникла проблема — он вылез за пределы блока. Тут есть два решения:

1. Переходим в режим редактирования текста и переносим слово Moon на вторую строку.

Правда, теперь заголовок разобьётся на две строки на всех экранах. Это особенность «Тильды». Но есть второй способ.

2. Меняем размер контейнера текста вручную или с помощью настройки ширины контейнера.

Ширину контейнера можно указать в пикселях и процентах. Чтобы поменять шкалу, нажмите на значок пикселей справа от значения и выберите проценты.

Проценты можно использовать для автоматической подстройки текста под разрешение экрана. Но такой способ уменьшает контроль над блоками текста и элементами, которые находятся рядом.

Теперь с помощью контейнера текста переносим слово Moon на вторую строку и уменьшаем параметр Spacing (межстрочный интервал) до единицы.

С заголовком разобрались, теперь то же самое проделываем с текстом описания. Но для начала передвинем его под заголовок. Размер гарнитуры шрифта описания — 18, размер ссылки — 14, размер номеров в слайдере — 40, размер шрифта строки копирайта менять не надо.

Макет для вертикального экрана планшета собран. Осталось увеличить логотип и немного поправить его по сетке.

Готовый макет в «Тильде».

Закрываем редактор Zero-блока, публикуем и просматриваем страницу.

Получилось достойно. В последнем блоке статьи переверстаем страничку под смартфон в вертикальном положении — а горизонтальный макет попробуйте сделать самостоятельно. Это хорошая практика.

Собираем макет для смартфона

Макет для смартфона будет существенно отличаться от предыдущих версий: мы уберём плашку, увеличим заголовок, покрасим его в белый цвет, описание перекрасим в серый, приглушим фотографию Луны, чтобы яркая картинка не перебивала восприятие текста, а потом немного увеличим логотип и меню. У нас получится такой макет. Годнота.

Переходим в редактор Zero-блока в режим редактирования макета для вертикально ориентированного смартфона.

Смотрим, как отображается макет по умолчанию.

Можно просто поправить обозначенные места на скриншоте, и работа будет завершена. Но мы же перфекционисты, а восприятие информации со смартфона отличается от восприятия с планшета или десктопа, так что внесём больше правок:

• Избавимся от подложки текста с описанием.
• Заголовок, описание и ссылку скомпонуем в рабочей области.
• Поменяем цвет текста описания на более приглушённый (можно серый).
• Уберём строку копирайта.
• Выровняем логотип и меню.
• Создадим шейп на весь экран, покрасим его в тёмный цвет, сделаем процентов на 70 прозрачным и расположим поверх фотографии.
• Уменьшим фотографию.

Начнём стандартно — выставим высоту экрана рабочей области.

После этого избавляемся от подложки текста описания: удалить её нельзя — тогда она пропадёт со всех остальных макетов. Поэтому просто смещаем её за пределы экрана или делаем прозрачной.

Теперь уберём за пределы экрана и фотографию — это поможет сконцентрироваться на компоновке текста и других элементов в рабочей области.

На этом этапе у вас должно получиться что-то подобное:

Переносим заголовок, описание и ссылку в рабочую область экрана.

Меняем цвет текста описания с помощью панели настроек.

Источник