Lottie-анимации в Zero-блоке
Добавляет настраиваемые lottie-анимации в любой шейп в Zero-блоке
Инструкция по установке
- Cкопируйте код ниже и вставьте его внутрь <head> в настройках сайтаЭтот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг.
<script src="https://cdn.postnikovmd.com/tilda@1.4/mods.min.js"></script>Скопировать код
Код скопирован!
Синхронизация обновлений включена. Новые версии и исправления будут устанавливаться автоматически.
Синхронизация обновлений отключена. Текущая версия останется неизменной, независимо от обновлений.
-
- Создайте шейп внутри Zero-блока, в который будет загружаться анимация и задайте ему класс .uc-lottieЕсли вы планируете использовать несколько lottie-анимаций на странице, задайте им разные классы, например, .uc-lottie1, .uc-lottie2 и т.д.
- Задайте в настройках модификации класс шейпа и ссылку на файл с анимацией
- Скопируйте код и вставьте его в блок T123 в конец страницы
Как это сделано?
<script>lottie.init(".uc-lottie1", { loop: true, url: "https://lottie.host/2b8deeba-023c-4104-b35b-581580324c8f/O0SbPsgF59.json" })</script>
<script>lottie.init(".uc-lottie2", { url: "https://lottie.host/2507774f-4667-4db2-95ac-8213a3c10bd6/31ujfdHtpO.json" })</script>Настройки модификации
Настройки модификации
Класс шейпа с анимацией:
Ссылка на файл с анимацией:
<!--lottie.js Lottie-анимация в Zero-блоке. https://postnikovmd.com/mods/lottie-->
<script>lottie.init(".uc-lottie")</script>Особенности
- Можно встроить в любой шейпLottie встраивается в размеры шейпа и работает внутри него
- Запускается по триггеруЕсли элемент с контейнером находится в видимой зоне экрана
- Работает с автоскейломМод работает с масштабированием так же корректно, как и без него
Документация
Параметры
© 2025 Максим Постников. Все права защищены.
Столкнулись с ошибкой?
Расскажите подробнее о проблеме, при которой модификация не работает или работает неправильно
Расскажите подробнее о проблеме, при которой модификация работает неправильно
Сообщение отправлено
Спасибо за обращение! Мы провалидируем ошибку и исправим её в ближайшее время
Нравятся модификации?
Поделитесь впечатлениями от работы с библиотекой — обратная связь поможет нам стать лучше
Поделитесь впечатлениями о сервисе — обратная связь поможет нам стать лучше
Сообщение отправлено
Спасибо, что делитесь с нами! Это помогает нам развиваться и улучшать сервис