•  
Оставить заявку
    •  

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-анимацией
Особенности
  1. Lottie анимация добавляется в Zero-блок и блок .t123
  2. Вам понадобится аккаунт в Github

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

Есть несколько сервисов с бесплатной Lottie анимацией, вот некоторые из них:
  1. LottieFlow - https://finsweet.com/lottieflow/category
  2. IconScout - https://iconscout.com/free-lotties
  3. 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.
Зачем это надо? Потому что в Тильде нет хостинга, а покупать отдельный хостинг на рег.ру нет никакого смысла. В Гитхаб Гисте не надо создавать репозиторий и работать с ветками, мы можем быстро загрузить свою анимацию.
  1. Пишем description (описание) своей анимации
  2. Название анимации в формате .json
  3. И вставляем ранее скопированный код из файла.
  4. Жмем «Create secret gist»
Далее нажимаем на кнопку Raw и пока что переходим к следующему шагу (не закрывайте страницу, которая открылась).
3. Добавляем Lottie анимацию в Тильду
Этот код вставляем в html контейнер внутри Zero Block (или в блок .t123)
Важно помнить, что от ширины html контейнера зависит размер анимации!

<!-- Lottie анимация -->
<div id="lottie-1"></div>
Далее идет 2 кода на выбор:
1 код - загружает библиотеку bodymovin
2 код - загружает библиотеку lottie-web (я использую эту библиотеку, т.к. она подходит под бесплатные Lottie анимации)

Важно! Этот код вставляем один раз на страницу в блок Т123.

<!-- Этот код загружает библиотеку bodymovin для Lottie анимации-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.5/lottie.min.js"></script>



<!-- Этот код загружает библиотеку lottie-web для Lottie анимации-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.7.5/lottie_light.min.js"></script>
Кодом ниже мы обращаемся к нашему хостингу.
  1. Откройте ту страницу, которую мы оставили на 2 шаге;
  2. Скопируйте адрес страницы;
  3. Вставьте полученный адрес в код ниже в строку path:
Этот код вставляем в новый блок .t123

<script>
    bodymovin.loadAnimation({
    container: document.getElementById("lottie-1"),
    renderer: "svg",
    loop: false, <!-- Меняй это значение на "true", если хочешь, чтобы анимация повторялась -->
    autoplay: true,
    path: "https://gist.githubusercontent.com/canBM/1270c385c7d7d732163ad900e893ebd5/raw/070e70ce3d462c0d8639e84e025bf725d1d581f4/happy-hacker.json"
    });
</script>
Вторая анимация делается точно также по образцу, только меняется цифра

<!-- Lottie анимация -->
<div id="lottie-2"></div>
Каждую новую анимацию лучше вставлять в отдельный html блок .t123, а не то могут быть конфликты.

Код взят с сайта https://bocmanbarada.ru/codes

<script>
    bodymovin.loadAnimation({
    container: document.getElementById("lottie-2"),
    renderer: "svg",
    loop: true, <!-- Меняй это значение на "false", если хочешь, чтобы анимация играла только 1 раз в начале -->
    autoplay: true,
    path: "https://gist.githubusercontent.com/canBM/c986b50cafef09c5235b8f98b0bace24/raw/b7d17050366ed1eac44d1187af0341f5ee7e7863/background-space.json"
    });
</script>

Больше кода для Tilda в ТГ-канале

Подпишись - https://t.me/breeze_tilda