Как сделать анимированный прелоадер в tilda
Работа с контентом
Бизнес-процессы
Скрипт прилодера для сайта
- Создать ZERO-блок и в нем отрисовать анимацию или взять анимацию в https://lottiefiles.com/featured
- Вставить на страницу блок T123
- Добавить скрипт
- Заменяем id ZERO блока на наш
#rec337799584
Просим обратить внимание: техническая поддержка Tilda Publishing не осуществляет поддержку связанную с работой кода
1) Справа сверху выставляем желаемые настройки:
Вход — откуда будет начинаться анимация;
Выход — откуда анимация будет появляться, при переходе на другую страницу;
Скорость — скорость анимации;
Количество — количество слоев;
Easing — плавность анимации;
Откючить_Анимацию_При_Выходе — отключает анимацию выхода с страницы. Эта настройка не отображается в демонстрации, но будет работать у вас на сайте.
Так-же, в вкладке «Цвета» можно изменить цвет каждого отдельного слоя эффекта.
2) Снизу на странице скопируйте код и вставьте его в блок Т123. Вы можете вставить этот блок в шапку, чтобы добавить эффект сразу на все страницы.
Важно: разместите этот блок на самом верху страницы.
Эффект загрузки страницы
Работает как стандартный блок Т228, но с другим эффектом. При входе на страницу, закрывает контент до момента её загрузки, после чего уходит в выбранную сторону. Дальше, при переходе по ссылке, контент закрывается, происходит загрузка и показывается другая страница.
Микроанимация загрузки и прокрутки страницы
Основатель компании «Nielsen Norman Group», является также её руководителем. Компания создана им совместно с Дональдом Норманом, который до этого являлся вице-президентом «Apple Computer». Сам же Якоб Нильсен до 1998 года занимал должность ведущего инженера в компании «Sun Microsystems», где был специалистом по юзабилити. (Википедия)
Один из основных принципов юзабилити, сформулированный Якобом Нильсеном (Jakob Nielsen), говорит: держите пользователей в курсе того, что происходит.
Сделать это поможет микроанимация. Мы добавили два типа анимации:
1. загрузки страницы и индикатор загрузки с настраиваемым цветом, который подскажет пользователю: «все в порядке, страница загружается»;
2. индикатор прокрутки страницы, который скажет человеку на каком месте страницы он сейчас находится — в начале, середине или в конце.
Как сделать простой прелоадер на Zero Block ?
Модификация поможет сделать прелоадер на Zero Block для вашего сайта на Tilda
Генератор кода
id Zero Block
Таймер для прелоадера
Показывать прелоадер
Войдите в аккаунт чтобы получить доступ к генератору кода
Этот генератор кода доступен только тем кто оплатил подписку
КОПИРОВАТЬ КОД
- Инструкция
1. Создаем Zero Block и устанавливаем ему высоту 100%;
2. Копируем id блока и вставляем в генератор кода
3. Указываем дополнительные настройки в генераторе
Таймер прелоадера — это время через которое прелоадер пропадет (указываем в миллисекундах)
Показ прелоадера — (Всегда) — прелоадер будет показываться при каждом обновлении страницы, (Только раз) — прелоадер будет показан всего один раз при первом заходе на сайт, (Через время) — прелоадер будет показан повторно только спустя час/день
4. Копируем готовый код и вставляем в HTML блок Т123