Как вставить гифку в тильду

Как сделать GIF из видео?

Чтобы сделать gif-анимацию из видео, воспользуйтесь сервисом на выбор:

Lottie анимация в Tilda Publishing. Как использовать Lottie на сайте

Lottie — это библиотека для создания анимаций, которая позволяет создавать векторные анимации и экспортировать их в формат JSON. Такая анимация имеет меньший размер файла и удобнее в использовании, чем обычные GIF-анимации. Lottie анимация в Tilda Publishing дает возможность создавать уникальный и интерактивный контент для вашего тильда сайта.

Как добавить Lottie анимацию в Tilda

Lottie анимация в Tilda

Для использования Lottie анимации на сайте в Tilda Publishing, сначала нужно создать анимацию в формате JSON с помощью библиотеки Lottie. Это можно сделать с помощью Adobe After Effects или найти уже готовую анимацию на сайте LottieFiles. Затем нужно загрузить файл JSON в Tilda Publishing и добавить его на страницу сайта. Для этого можно использовать блок “HTML-код”, который можно найти в меню блоков Tilda. В этой статье мы подробно разберем способ с уже готовой анимацией.

Зарегистрируйтесь на сайте LottieFiles.
Раскройте вкладку «Discover» и выберите «Free Ready-to-use Animations».
Нажмите на понравившуюся анимацию левой кнопкой мыши.
В открывшемся окне нажмите на копку «Download» и «Upload to My Workspace».
Нажмите на кнопку «Save» чтобы перейти в окно редактирования анимации.
Нажмите на кнопку «Handof & Embed» и переведите тумблер в активное положение.
Сохраните куда-нибудь ссылку из пункта «Asset link».
Перейдите в Тильду и создайте zero block.
Добавьте html элемент и скопируйте в него следующий код:

lottie-player id="lottie-auto-1" src="ссылка" style="width:100%; height:100%;">lottie-player>

Вместо слова «ссылка» вставьте сохраненную ссылку на анимацию из LottieFiles.
Расположите html элемент там, где у вас должна быть лотти анимация.
Сохраните изменения и выйдите из зеро блока.
Добавьте блок «Т123».
Нажмите на кнопку «Контент» и скопируйте туда следующий скрипт:

script src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js">script> script src="https://unpkg.com/@lottiefiles/lottie-player@0.4.0/dist/lottie-player.js">script> script> LottieInteractivity.create( player: '#lottie-auto-1', mode: "chain", actions: [  state: 'autoplay', type: "loop", transition: 'repeat', >  ], >);  script>

Опубликуйте страницу и получите результат.

Есть несколько вариантов воспроизведения Lottie анимации в Tilda: автоматическое воспроизведение (которое мы уже рассмотрели), при скролле, при наведении и при помощи курсора мыши. Ниже мы рассмотрим все оставшиеся варианты.

Lottie анимация в Tilda. Воспроизведение при скролле

Для того, чтобы настроить воспроизведение лотти анимации при скролле, выполните следующие шаги:

В html элементе зеро блока измените «auto» на «scroll».
В блок «Т123» скопируйте следующий скрипт:

script> //Анимация по сроллу LottieInteractivity.create( mode: 'scroll', player: '#lottie-scroll-1', //ID lottie-player в зеро-блоке и тут должны совпадать actions: [  visibility:[0, 1.0], type: "seek", frames: [0, 300], >,  ] >); script>

Lottie анимация в Tilda. Воспроизведение при наведении

Для того, чтобы настроить воспроизведение лотти анимации при наведении, выполните следующие шаги:

В html элементе зеро блока измените «auto» на «hover».
В блок «Т123» скопируйте следующий скрипт:

script> // Анимация по наведению LottieInteractivity.create( player: '#lottie-hover-1', //ID lottie-player в зеро-блоке и тут должны совпадать mode: "cursor", actions: [  type: "hover", forceFlag:false //Если указать значение true, то анимация будет воспроизводится сначала при каждом наведении >  ], >);  // type: "pauseHold" — Проигрывание анимации при наведении, если убарть курсор, то анимацйия становится на паузу // type: "hold" — Проигрывание анимации при наведении, реверс если убрать курсор script>

Lottie анимация в Tilda. Воспроизведение при помощи курсора мыши

Для того, чтобы настроить воспроизведение лотти анимации при помощи курсора мыши, выполните следующие шаги:

В html элементе зеро блока измените «auto» на «position».
В блок «Т123» скопируйте следующий скрипт:

script> //Анимация по позиции курсора LottieInteractivity.create( player: '#lottie-position-1', //ID lottie-player в зеро-блоке и тут должны совпадать mode:"cursor", actions: [  position:  x: [0, 1], y: [-1, 2] >, type: "seek", frames: [0, 300] >  ] >); script>

Преимущества использования Lottie анимации на сайте в Tilda Publishing

Lottie анимация имеет меньший размер файла, чем другие виды анимации, что делает ее легкой для загрузки на сайт и ускоряет время загрузки страницы. Она также позволяет создавать красивые и плавные анимации, которые улучшают пользовательский опыт на сайте. Кроме того, Lottie анимация поддерживается на большинстве устройств, включая мобильные устройства.

Заключение

Использование Lottie анимации на сайте в Tilda Publishing может значительно улучшить пользовательский опыт на сайте и создать уникальный контент. Для использования Lottie анимации на сайте в Tilda Publishing нужно создать анимацию в формате JSON с помощью библиотеки Lottie, загрузить ее на сайт и добавить на страницу с помощью блока “HTML-код”. Эта технология имеет много преимуществ, таких как меньший размер файла, плавность анимации и поддержка на большинстве устройств. В целом, Lottie анимация — это отличный способ создания интерактивного и красивого контента на сайте в Tilda Publishing.

Lottie анимация Tilda

Lottie анимация — это легкая, масштабируемая анимация для вашего веб-сайта.

Lottie анимация на 99% легче любой гифки.

На данном ресурсе есть коллекция бесплатных Lottie — https://iconscout.com/free-lotties

Здесь вы можете создать свою Lottie-анимацию — https://lottiefiles.com/

А с помощью кода ниже ее можно встроить на ваш сайт на Тильде.

P.s.: Все анимации, что вы видите на сайте — это Lottie

Lottie анимация — это легкая, масштабируемая анимация для вашего веб-сайта.

Lottie анимация на 99% легче любой гифки.

На данном ресурсе есть коллекция бесплатных Lottie — https://iconscout.com/free-lotties

А вот здесь вы можете создать свою Lottie-анимацию — https://lottiefiles.com/

А с помощью кода ниже ее можно встроить на ваш сайт на Тильде.

P.s.: Все анимации, что вы видите на сайте — это Lottie

Наглядный пример разницы веса гиф-анимации с Lottie-анимацией
Особенности

Lottie анимация добавляется в Zero-блок и блок .t123
Вам понадобится аккаунт в Github

Ищем Lottie анимацию

LottieFlow —https://finsweet.com/lottieflow/category
IconScout —https://iconscout.com/free-lotties
Creattie —https://creattie.com/lottie-animated-illustrations

Я выбрал сервис IconScout.

Выбираем нужную анимацию и скачиваем в формате Lottie JSON

Далее открываем скачанный файл с помощью Visual Studio или если его нет, то через обычный Блокнот.
Копируем весь код (Ctrl+A -> Ctrl+C / Cmd+A -> Cmd+C)

2. Загружаем анимацию на хостинг

Бесплатным хостингом у нас будет Github Gist — https://gist.github.com/.
Заводим аккаунт, если его нет и создаем новый Gist.
Зачем это надо? Потому что в Тильде нет хостинга, а покупать отдельный хостинг на рег.ру нет никакого смысла. В Гитхаб Гисте не надо создавать репозиторий и работать с ветками, мы можем быстро загрузить свою анимацию.

Пишем description (описание) своей анимации
Название анимации в формате .json
И вставляем ранее скопированный код из файла.
Жмем «Create secret gist»

Далее нажимаем на кнопку Raw и пока что переходим к следующему шагу (не закрывайте страницу, которая открылась).

Видео на фон в Zero блоке

Вместо .tn-elem__2946290291616420206251 укажите класс своего HTML-элемента. Задать произвольный класс элементу в Zero блоке можно с помощью контекстного меню (вызывается правой кнопкой мыши по элементу) и нажать «Add CSS Class Name».

Фоновое видео пропорционально ширине и высоте экрана устройства

Предупреждение. На смартфоне видео будет прыгать при скрытии адресной строки и панели снизу (где кнопки). Лучше использовать 1-й вариант кода.

   
  .videoBackground > video

Фоновое видео на всю страницу в Тильде

   
  .videoBackground > video