3Lottie со скроллом для Sticky элементов

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

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

Вы находите готовую Lottie-анимацию и копируете её URL-адрес. В редакторе Taptop вы создаете специальную структуру со sticky-элементом. Затем в генераторе кода вы указываете URL анимации и класс вашего sticky-контейнера.

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

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

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-sticky. Если вы планируете использовать несколько разных анимаций на одной странице, используйте уникальные классы для каждой: lottie-container-scroll-sticky-1 и так далее.

   

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

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

   

5. Настройте sticky-позиционирование. Убедитесь, что непосредственный родитель контейнера с анимацией имеет стиль position: sticky, а один из его "прародительских" контейнеров имеет высоту, значительно превышающую высоту экрана (например, 200vh или 300vh). Это необходимо для создания области прокрутки, в которой будет работать sticky-эффект.

   ⚠️ Важно! Эта Lottie-анимация будет работать только в том случае, если у одного из родительских компонентов указана высота более 100vh, а непосредственный родитель анимации имеет стиль position: sticky.

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

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

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

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

При необходимости в секции "Дополнительные настройки" можно указать начальный и конечный кадр анимации.

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

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

Как загрузить и получить ссылку на 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