Как создать крутые переходы между блоками в Tilda Publishing
Введение
Если вы создаёте сайт с помощью Tilda, скорее всего, вам уже знакомы удобство и простота работы с этим инструментом. Несмотря на широкий выбор готовых блоков, иногда возникает желание добавить что-то уникальное, что сделает ваш сайт особенным. Один из таких способов — это создание эффектных переходов между блоками, которые придадут вашему сайту динамичность и сделают его более запоминающимся.
Рекомендации
Выберите подходящие блокиПеред тем как начать настройку переходов, важно выбрать блоки, которые будут взаимодействовать друг с другом. Рекомендуется выбирать блоки с похожей цветовой гаммой или стилем, чтобы сохранить гармоничное оформление сайта.Используйте анимацииTilda предлагает широкий выбор анимаций, которые помогут создать плавные переходы между блоками. Например, можно использовать анимацию "Fade in" для мягкого появления следующего блока на экране или "Slide up" для перемещения блока сверху вниз.Примените эффекты переходаЕщё один способ добавить интересные переходы между блоками — это использование различных эффектов. В Tilda есть множество таких эффектов, как "Zoom out" или "Rotate in", которые придадут вашему сайту динамичность и индивидуальность.Создайте свои переходыЕсли стандартные эффекты и анимации не подходят для вашего сайта, вы можете разработать собственные переходы. Для этого понадобятся знания HTML и CSS, но такой подход позволит вам достичь действительно уникальных результатов.В этой статье мы подробно остановимся на последнем пункте — создании собственных переходов, рассмотрим несколько вариантов и объясним, как их реализовать.
Делаем переходы между блоками. Анимированные круги
- Создайте zero block.
- Удалите стандартное наполнение блока.
- По желанию, измените цвет фона блока для лучшей видимости перехода.
- В поле «GRID CONTAINER HEIGHT», задайте блоку такую высоту, как будто здесь два блока, а не один. (Например: 800px)
- Нажмите на кнопку «+» и выберите «Add Shape».
- Расположите shape по середине, в поле «SHAPE» выберите «circle», чтобы сделать его круглым.
- При желании, измените цвет фона shape – a.
- Зажмите клавишу «SHIFT» или «COMMAND», потяните за край элемента, чтобы увеличить shape пропорционально.
Теперь необходимо добавить пошаговую анимацию. Для этого:
- Нажмите на shape левой кнопкой мыши.
- Справа снизу найдите пункт «STEP-BY-STEP ANIMATION» и нажмите на кнопку «ADD».
- В поле «EVENT» выберите «on Scroll».
- В поле «STEPS» нажмите на кнопку «+ Add step».
- В поле «DISTANCE» пропишите 5000. (Анимация сработает после того, как будет выполнен scroll до 5000 пикселей)
- В поле «SCALE X,Y» пропишите масштабирование элемента в 1000 пикселей.
- В поле «FIX» выберите «Fixed», чтобы сделать shape фиксированным.
Настало время добавить контент в наш блок. Например, текстовый заголовок.
- Нажмите на кнопку «+» и выберите «Add text».
- Расположите текст внутри круга.
- Добавьте тексу пошаговую анимацию. (step by step animation)
- В поле «DISTANCE» пропишите 2000.
- В поле «FIX» выберите «Fixed», чтобы сделать текст фиксированным.
- Продублируйте shape в виде круга, измените цвет и опустите вниз на 2500 пикселей от начла блока.
- Расположите новый shape по центру.
Первый shape – первый блок, а второй shape – второй блок. Таким образом, мы сделали два блока в одном + создали необычный переход между ними.
Делаем переходы между блоками. Плавная смена заливки фона
Предлагаем еще один стильный переход. На этот раз обойдемся стандартными функциями тильды. Это переход будет работать между тремя блоками. Поэтому:
- Создайте три любых блока одного цвета.
- После первого блока нажмите на кнопку «+», найдите пункт «Разделитель» и выберите блок «DV11A. Переключение цвета фона».
- Нажмите на кнопку «Настройки» и выберите желаемый цвет фона.
- Добавьте еще один блок «DV11A» после третьего блока.
- Нажмите на кнопку «Настройки» и выберите желаемый цвет фона.
- Переход готов.
Делаем переходы между блоками. Облака
- Создайте zero block.
- Для наглядности добавьте фоновое изображение.
- В поле «BEHAVIOR» выберите «Fixed», чтобы зафиксировать фон при прокручивании страницы.
- Добавьте заголовок.
- Найдите у заголовка пункт «BASIC ANIMATION».
- В поле «FIXING» выберите один из вариантов по желанию. (Сверху, по центру, снизу)
- Скачайте векторные файлы с облаками.
- Заполните ими все нижнее пространство блока таким образом, чтобы не было видно нижней границы блока.
- Блок, следующий за блоком с облаками, должен быть белого цвета.
- Сохраните изменения, опубликуйте страницу и насладитесь крутым и стильным переходом.
Делаем переходы между блоками. Векторная волна
- Создайте zero block.
- Скачайте векторный файл с волной для этого перехода.
- Увеличьте высотку зеро блока.
- Нажмите на кнопку «+», выберите «Add Image» и загрузите в зеро блок файл с волной.
- Нажмите на волну левой кнопкой мыши.
- В поле «W» пропишите 100, а вместо «px» выберите «%».
- Нажмите на кнопку «+ CONTAINER», «WINDOW CONTAINER», в «AXIS X» выберите «Center», а в «AXIS Y» – «Top».
- Область внутри волны – блок со своим контентом.
- Внизу зеро блока, после волны, обязательно оставьте пустой промежуток. Это будет началом следующего блока.
Делаем переходы между блоками. Плавная смена заливки фона
Предлагаем еще один стильный переход. На этот раз обойдемся стандартными функциями тильды. Это переход будет работать между тремя блоками. Поэтому:
- Создайте три любых блока одного цвета.
- После первого блока нажмите на кнопку «+», найдите пункт «Разделитель» и выберите блок «DV11A. Переключение цвета фона».
- Нажмите на кнопку «Настройки» и выберите желаемый цвет фона.
- Добавьте еще один блок «DV11A» после третьего блока.
- Нажмите на кнопку «Настройки» и выберите желаемый цвет фона.
- Переход готов.
Делаем переходы между блоками. Облака
- Создайте zero block.
- Для наглядности добавьте фоновое изображение.
- В поле «BEHAVIOR» выберите «Fixed», чтобы зафиксировать фон при прокручивании страницы.
- Добавьте заголовок.
- Найдите у заголовка пункт «BASIC ANIMATION».
- В поле «FIXING» выберите один из вариантов по желанию. (Сверху, по центру, снизу)
- Скачайте векторные файлы с облаками.
- Заполните ими все нижнее пространство блока таким образом, чтобы не было видно нижней границы блока.
- Блок, следующий за блоком с облаками, должен быть белого цвета.
- Сохраните изменения, опубликуйте страницу и насладитесь крутым и стильным переходом.
Делаем переходы между блоками. Векторная волна
- Создайте zero block.
- Скачайте векторный файл с волной для этого перехода.
- Увеличьте высотку зеро блока.
- Нажмите на кнопку «+», выберите «Add Image» и загрузите в зеро блок файл с волной.
- Нажмите на волну левой кнопкой мыши.
- В поле «W» пропишите 100, а вместо «px» выберите «%».
- Нажмите на кнопку «+ CONTAINER», «WINDOW CONTAINER», в «AXIS X» выберите «Center», а в «AXIS Y» – «Top».
- Область внутри волны – блок со своим контентом.
- Внизу зеро блока, после волны, обязательно оставьте пустой промежуток. Это будет началом следующего блока.
Делаем переходы между блоками. Градиент
Градиентный переход будет состоять из трех блоков.
- Создайте любой блок.
- Нажмите на кнопку «Настройки».
- В поле «Цвет фильтра в начале» выберите желаемый цвет перехода, а «непрозрачность» – 30%.
- В поле «Цвет фильтра в конце» выберите тот же цвет, что и в начале, а «непрозрачность» – 100%.
- Добавьте зеро блок.
- Цвет фона сделайте таким же, каким сделали фильтры в предыдущих пунктах.
- Наполните блок контентом, при желании.
- Сохраните и выйдите из зеро блока.
- Добавьте езе один блок после зеро блока.
- Нажмите на кнопку «Настройки».
- В поле «Цвет фильтра в начале» выберите цвет зеро блока, а «непрозрачность» – 100%.
- В поле «Цвет фильтра в конце» выберите цвет зеро блока, а «непрозрачность» – 0%.
- Если в каком-то блоке нет возможности настроить фильтры, конвертируйте его в zero block.
- Переход готов.
Делаем переходы между блоками. Стрелки
- Создайте zero block.
- Добавьте фоновое изображение.
- В поле «OVERFLOW» выберите «Visible».
- Измените высоту блока. (1400px)
- Добавьте контент в блок и расположите в верхней его части.
- В поле «BEHAVIOR» выберите «Fixed», чтобы зафиксировать фон при прокручивании страницы.
- Cкачайте svg файл перехода.
- Нажмите на кнопку «+» и выберите «Add Image».
- Загрузите svg файл в зеро блок.
- Нажмите на волну левой кнопкой мыши.
- В поле «W» пропишите 100, а вместо «px» выберите «%».
- Нажмите на кнопку «+ CONTAINER», «WINDOW CONTAINER», в «AXIS X» выберите «Center», а в «AXIS Y» – «Bottom».
- Вручную опустите svg вниз таким образом, чтобы нижняя стрелка оказалась за пределами зеро блока.
- Получаем два блока в одном с красивым переходом.
Делаем переходы между блоками. Анимированная волна
- Создайте zero block.
- В поле «OVERFLOW» выберите «Visible».
- Добавьте html элемент. (Add HTML)
- В поле «W» пропишите 100, а вместо «px» выберите «%».
- В поле «H» пропишите 80, а вместо «px» выберите «%».
- Нажмите на кнопку «+ CONTAINER», «WINDOW CONTAINER», в «AXIS X» выберите «Center», а в «AXIS Y» – «Center».
- Скопируйте и вставьте в html блок код.