2Lottie со скроллом

Инструкция по подключению расширения

Как работать с инструкцией?

Вы находите готовую Lottie-анимацию и копируете её URL-адрес. В генераторе кода вы указываете этот URL, класс блока-контейнера на вашей странице и настраиваете параметры скролла (например, на каком участке экрана анимация будет проигрываться).

Генератор создает <script>, который вы вставляете в настройки страницы. Скрипт автоматически находит ваш блок и вставляет в него анимацию, привязанную к прокрутке.

Как работает расширение?

1. Вы находите Lottie-анимацию и копируете её URL в формате .json.

2. В редакторе Taptop вы создаете пустой блок-контейнер для этой анимации.

3. В генераторе кода вы указываете URL анимации и CSS-класс вашего контейнера.

4. Генератор создает <script>, который вы вставляете в настройки страницы Taptop.

5. Скрипт автоматически находит ваш блок-контейнер и встраивает в него готовую анимацию с автовоспроизведением.

Пример работы анимации

Установка и использование

Шаг 1: Подготовьте контейнер в Taptop

1. Найдите и подготовьте Lottie-анимацию. Если у вас еще нет ссылки на анимацию, воспользуйтесь инструкцией «Как загрузить и получить ссылку на Lottie-анимацию» ниже.

2. Создайте контейнер. На странице Taptop, где должна быть анимация, добавьте пустой блок (Div Block).

   

3. Присвойте класс (источник стилей). Выделите этот блок и на панели стилей задайте ему уникальный класс, например lottie-container-scroll. Если вы планируете использовать несколько разных анимаций на одной странице, используйте уникальные классы для каждой: lottie-container-scroll-1, lottie-container-scroll-2 и так далее.

   

   ⚠️ Важно: Если нескольким блокам на странице задать один и тот же класс, то одна и та же анимация добавится в каждый из этих блоков.

4. Задайте размеры. Убедитесь, что Div Block имеет заданные размеры (ширину и высоту) на панели стилей. Анимация заполнит этот контейнер.

   

Шаг 2: Настройте генератор кода

Обратитесь к генератору кода и заполните следующие поля:

• URL Lottie-анимации (.json) (*): Вставьте скопированную полную ссылку на .json файл анимации.

• CSS-класс блока-контейнера (*): Введите то же имя класса, которое вы задали пустому блоку (Div Block) на шаге 1.

В секции "Дополнительные настройки" можно более точно управлять поведением анимации:

• Начальный кадр: Кадр, с которого начнётся анимация (по умолчанию: 0).

• Конечный кадр: Кадр, на котором закончится анимация. Можно ввести номер кадра или слово last для автоматического определения последнего кадра.

• Начало зоны скролла: Определяет, в какой части экрана начнется воспроизведение. Указывается число от 0 (верх экрана) до 1 (низ экрана).

• Конец зоны скролла: Определяет, в какой части экрана закончится воспроизведение. Указывается число от 0 до 1.

Как загрузить и получить ссылку на Lottie-анимацию

Шаг 1: Авторизация на сайте

Авторизуйтесь или зарегистрируйтесь на сайте lottiefiles.com.

Страница авторизации LottieFiles

Если у вас нет аккаунта, нажмите кнопку "Sign Up" и заполните форму регистрации.

Шаг 2: Переход в Dashboard

После успешной регистрации или авторизации вас автоматически перенаправит на страницу Dashboard. Если этого не произошло, нажмите на кнопку "Go to Dashboard" в правом верхнем углу экрана.

Переход в Dashboard

Шаг 3: Начало загрузки анимации

На странице Dashboard вы увидите три основные опции для работы с анимациями:

Варианты создания анимации

• Create animation — создание новой анимации с помощью встроенного редактора

• Upload animation — загрузка готовых файлов анимации

• Open sample animation — просмотр примера готовой анимации

Для загрузки вашей анимации выберите "Upload animation".

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

Шаг 4: Выбор типа загружаемого файла

После нажатия на "Upload animation" откроется модальное окно с тремя вариантами загрузки:

Окно выбора типа загрузки

Выберите "Video & image to Lottie" для конвертации ваших видео или изображений в формат Lottie.

Поддерживаемые форматы:

• Видео: MP4, WebM, MOV

• Изображения: GIF, PNG последовательности (в ZIP архиве)

• Максимальный размер файла: 10 MB

Нажмите "Browse" для выбора файла с вашего компьютера или перетащите файл в пунктирную область (drag & drop).

Шаг 5: Процесс загрузки и конвертации

После выбора файла начнется автоматический процесс загрузки и конвертации:

Процесс загрузки анимации

Время обработки может варьироваться от 30 секунд до нескольких минут в зависимости от размера и сложности файла.

Шаг 6: Скачивание готового файла

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

Панель скачивания файлов

Нажмите кнопку "Download" рядом с выбранным форматом.

Шаг 7: Загрузка JSON файла в Taptop

Перейдите в раздел "Ресурсы" в интерфейсе редактора вашей страницы на платформе Taptop и нажмите кнопку загрузки (стрелка вверх) в правом верхнем углу.

Раздел Ресурсы в Taptop

Загрузите скачанный ранее JSON файл с Lottie-анимацией. После успешной загрузки файл появится в списке ваших ресурсов.

Шаг 8: Копирование ссылки на анимацию

Найдите загруженный JSON файл в разделе "Документы" и кликните по нему правой кнопкой мыши. В контекстном меню выберите:
Копировать ссылку ---> Абсолютная ссылка ---> Копировать для открытия:

Контекстное меню с опциями копирования

Шаг 9: Вставка ссылки в генератор кода

Перейдите на страницу с генератором кода для нужной Lottie-анимации. Найдите поле "URL Lottie-анимации (.json)" и вставьте скопированную ссылку.

Поле ввода URL анимации

Формат ссылки должен быть примерно такой:

https://site-71223.taptop.site/f/animation.json