Сайты
Чат-боты
Приложения
Tilda
на Tilda
Карусель изображений
Как сделать интерактивную карту на Tilda
Видеоинструкция (для тех, кому неудобно работать с текстом)
"Заходим в наш проект, создаем пустой Zero Блок (1.1-1.3), удаляем все содержимое (1.4), добавляем прямоугольник, нажав "add shape" (1.5), и вставляем N количество прямоугольников (N - число изображений, на Ваше усмотрение). Прямоугольники должны быть одинаковые по размерам, как на фото 1.6 (Цвета некоторых shape изменены для наглядности). Следующим шагом загружаем изображения в прямоугольники, нажав "upload file"(1.7). Мой результат представлен на изображении 1.8.
Tilda поддерживает практически любые форматы изображений, но настоятельно рекомендую оптимизировать изображение или конвертировать его в формат WebP для обеспечения быстрой загрузки сайта. Для этого вы можете воспользоваться любым онлайн-сервисом-конвертером."
Tilda поддерживает практически любые форматы изображений, но настоятельно рекомендую оптимизировать изображение или конвертировать его в формат WebP для обеспечения быстрой загрузки сайта. Для этого вы можете воспользоваться любым онлайн-сервисом-конвертером."
Настройка движения карусели
Значения данных параметров указаны в изображении 2.4 для Вашего удобства.
Следующим шагом необходимо распространить данную анимацию на другие изображения. Для этого в настройках копируем анимацию, нажав "Copy animation" (2.5). По очереди заходим в настройки Step-by-step Animation каждого изображения и вставляем параметры анимации, нажав "Past animation" (2.6).
*Step-by-step Animation — пошаговая анимация. Позволяет реализовать яркие и креативные идеи в соответствии с вашим сценарием.
Меняем в настройках параметр "Scale Grid Container" на "Autoscale to window width", чтобы автоматически масштабировать элементы сайта пропорционально ширине экрана. (2.7)
- Кликните по крайнему по порядку изображению, чтобы открыть его настройки ("Settings").
- В самом низу настроек элемента найдите "Step-by-step Animation" * и нажмите на кнопку "Add" (2.1).
- В открывшихся настройках "Step-by-step Animation"* в строке "Event" выберите "element on screen" (пункт 2.3), а в строке "Start trigger" выберите "On Window Bottom" (2.2)
- Перед вами появится шаги (steps). "Start" — начальная точка элемента. Добавьте второй шаг, нажав "Add Step" (пункт 2.3), и редактируйте Step 1 по двум параметрам:
- "Duration" — временная продолжительность перехода от шага 0 к шагу 1. (Ставим значение 10 секунд)
- "Move x,y" — изменение по осям x, y. (Ставим значение X "-1500 px)
Значения данных параметров указаны в изображении 2.4 для Вашего удобства.
Следующим шагом необходимо распространить данную анимацию на другие изображения. Для этого в настройках копируем анимацию, нажав "Copy animation" (2.5). По очереди заходим в настройки Step-by-step Animation каждого изображения и вставляем параметры анимации, нажав "Past animation" (2.6).
*Step-by-step Animation — пошаговая анимация. Позволяет реализовать яркие и креативные идеи в соответствии с вашим сценарием.
Меняем в настройках параметр "Scale Grid Container" на "Autoscale to window width", чтобы автоматически масштабировать элементы сайта пропорционально ширине экрана. (2.7)
Визуальные настройки
Мы реализовали основной функционал. Осталось отредактировать визуальную часть, к примеру, я решил добавить по центру текст "Карусель из изображений" и тёмный фильтр.
Мы реализовали основной функционал. Осталось отредактировать визуальную часть, к примеру, я решил добавить по центру текст "Карусель из изображений" и тёмный фильтр.
Мобильная адаптация
Теперь приступим к мобильной адаптации. (3.1)
Редактируем размер и положение текста (если Вы добавляли) (3.2)
Выделяем все наши изображения и меняем размер с положением. (3.3)
После данного шага протестируйте, как выглядит карусель с мобильного устройства, хотя бы в режиме предпросмотра. Скорее всего понадобится изменить параметр "Move x,y" в настройках Step-by-step animation в меньшую сторону в "step 1"
Редактируем размер и положение текста (если Вы добавляли) (3.2)
Выделяем все наши изображения и меняем размер с положением. (3.3)
После данного шага протестируйте, как выглядит карусель с мобильного устройства, хотя бы в режиме предпросмотра. Скорее всего понадобится изменить параметр "Move x,y" в настройках Step-by-step animation в меньшую сторону в "step 1"