Дизайн
#Руководства

Zero-блок в Tilda: анимация лендинга

Рассказываем об основных принципах анимации Zero-блока, эффектах и настройках каждой функции.

Иллюстрация: Оля Ежак для Skillbox Media

Анимация — инструмент дизайнера, который помогает подчеркнуть важную деталь, добиться нужного настроения или сделать интерфейс сайта приятнее. Вы сможете воспользоваться им и в Tilda — в редакторе Zero-блока.

Рассказываем, как сделать анимированные элементы сайта на Tilda, и показываем, как с их помощью скопировать этот лендинг о Вьетнаме.

Это инструкция о продвинутой работе в Tilda. Если вы ещё ей не пользовались, советуем прочитать предыдущие статьи об этом конструкторе сайтов:

Перед началом работы зайдите в Tilda и создайте новую страницу с Zero-блоком. Высоту укажите 10 000 пикселей — этого достаточно, чтобы протестировать самые крутые анимационные эффекты и целиком сверстать лонгрид.

Структура лонгрида

Сайт состоит из пяти частей:

1. Главный экран. На нём используется эффект фиксированной анимации, анимация параллакса и цикличная анимация элементов логотипа в углу.

Изображение: Skillbox Media

2. Экран с текстом и фотографиями, которые фиксируются во время скролла.

Изображение: Skillbox Media

3. Экран с декоративным текстом и фотографиями. При скролле все элементы появляются с разных сторон экрана.

Изображение: Skillbox Media

4. Блок фотографий и фонового текста.

Изображение: Skillbox Media

5. Заключительный экран с блоком фотографий и эффектом параллакса.

Изображение: Skillbox Media

Меню

Чтобы при скролле меню было всегда доступно, нужно зафиксировать его в верхней части экрана:

  • Выделите нужный элемент — плашку, на которой находятся пункты меню.
  • Перейдите в панель настроек и в блоке Basic animation («Базовая анимация») найдите свойство Fixing («Фиксация»).
  • В появившемся меню выберите On window top («По верху окна»).
  • В пункте Distance («Дистанция») укажите значение в 10 000 px, чтобы меню было видно в любой точке страницы.
Фиксируем плашку меню и указываем нужную высоту. Изображение: Skillbox Media

Проверьте результат в предпросмотре — сохраните свою работу, закройте редактор Zero-блока и нажмите кнопку «Предпросмотр». При скролле плашка должна зафиксироваться в верхней части страницы. Текст вместе с ней пока не залипает — это нормально:

Изображение: Skillbox Media

Вернитесь в редактор Zero-блока и повторите все действия с каждым пунктом меню: укажите нужную фиксацию и высоту. Для начала проверьте, как будет себя вести кнопка Home:

Тестируем настройку анимации первого пункта меню. Изображение: Skillbox Media

Сейчас она влипает в верхний край окна. Чтобы это исправить, в настройках базовой анимации укажите Trigger offset («Отступ») — 30 пикселей. То же самое сделайте и с логотипом, только вместо 30 укажите 10 пикселей.

Изображение: Skillbox Media

Укажите Trigger offset у всех пунктов меню, чтобы они встали где нужно:

Изображение: Skillbox Media

Параллакс-анимация

Параллакс-анимация довольно проста в настройках и имеет всего несколько параметров. Чтобы понять, как технически работает этот эффект, попробуйте сделать его с помощью свойства Mouse («Отклик на курсор»). Выберите его в пункте Basic animation и выставьте любые значения по осям X и Y:

Изображение: Skillbox Media

Скорее всего, анимация у вас будет работать не так, как вы ожидали:

Изображение: Skillbox Media

Координаты осей X и Y задаются относительно курсора мыши, и объекты смещаются относительно его положения.

Для лонгрида больше подходит Scroll — объекты будут смещаться при скролле страницы. Настройка у Scroll всего одна — скорость, которая по умолчанию равна 100. Чем больше это значение, тем быстрее смещаются объекты. Для примера рекомендуем выбирать между 50 до 200.

Изображение: Skillbox Media

У каждого объекта укажите разную скорость, чтобы анимация выглядела интереснее. У самой верхней иллюстрации укажите 150, у следующей 80, а у заголовка — 200:

Изображение: Skillbox Media

Заголовок будет догонять верхнюю фотографию, наезжая на нижнюю, а нижняя фотография, наоборот, поедет навстречу заголовку — за счёт этого будет казаться, что объекты находятся в разных плоскостях:

Изображение: Skillbox Media

Фиксирование картинки

Иногда на сайтах-блогах используют интересный приём — при скроллировании текст проматывается, а тематическая картинка остаётся на протяжении всего текста, таким образом вы можете привязывать суть прочитанного к визуальному образу.

Изображение: Skillbox Media

Чтобы это сделать, воспользуйтесь фиксацией блока, как вы уже сделали с меню: Fixing → On window top.

Картинка не должна влипать в меню, поэтому нужно указать ей дополнительный вертикальный отступ. Чтобы понять, какой именно нужен отступ, посмотрите на высоту плашки меню и прибавьте к ней 18. В нашем случае высота плашки равна 82 пикселям, значит, отступ у иллюстрации должен равняться 100:

Вычисляем нужный отступ от верхней части экрана до картинки. Изображение: Skillbox Media

Укажите получившееся число в блоке Trigger offset в пункте Basic animation:

Указываем получившееся значение в поле Trigger offset. Изображение: Skillbox Media

Также нужно указать дистанцию, чтобы иллюстрация была видна только напротив своего текста. Для этого нужно вычислить высоту текстового блока. Самый простой способ — скачать плагин Page Rulers Redux для Google Chrome и измерить расстояние от нижней границы иллюстрации до нижней границы текста:

Изображение: Skillbox Media

Получившееся число впишите в свойство Distance на панели настроек. В нашем случае это 830 пикселей.

Изображение: Skillbox Media

В результате картинка будет привязана к тексту:

Изображение: Skillbox Media

Анимация из иллюстраций и текста

Следующий блок на сайте состоит из пошаговой анимации — при скролле все элементы выезжают из разных сторон:

Изображение: Skillbox Media

Чтобы её настроить, воспользуйтесь блоком настроек Step-by-step animation.

1. Нажмите кнопку Add («Добавить»).

Изображение: Skillbox Media

2. В появившемся списке выберите событие, при котором будет работать анимация, например On scroll, чтобы анимация работала при скролле страницы.

Изображение: Skillbox Media

3. Текст при скролле должен перемещаться от правого края экрана к левому. Чтобы это настроить, нажмите на кнопку Add step («Добавить шаг») и передвиньте текстовую строку влево.

Изображение: Skillbox Media

4. Проверьте результат. У текста появится анимация.

Изображение: Skillbox Media

5. Сейчас это не совсем то, что нужно, так как текст улетает наверх. Чтобы это исправить, в строке Distance укажите 4000 пикселей — этого достаточно, чтобы оценить эффект анимации движения текста.

Изображение: Skillbox Media
Изображение: Skillbox Media

6. В пункте Fix панели настроек пошаговой анимации выберите Fixed, чтобы строка не уезжала вверх.

Изображение: Skillbox Media

7. По желанию настройте Opacity («Прозрачность»), Rotate («Поворот»), Delay («Задержку») или укажите точные координаты объекта.

Можете указать дополнительные параметры. Изображение: Skillbox Media

8. Укажите прозрачность 0, чтобы текст в конце плавно исчез. Проверьте страницу:

Тестируем настройки анимации. Изображение: Skillbox Media

9. Сейчас текст движется над блоком меню. Чтобы это исправить, укажите Trigger offset на 200 пикселей:

Изображение: Skillbox Media
Изображение: Skillbox Media

Остальные текстовые строки и иллюстрации из примера работают по тому же принципу — настраивайте в Step-by-step animation новые шаги, указывайте нужную дистанцию, фиксируйте объект и задавайте ему отступ сверху. Заголовки на фоне — это базовая анимация с параллаксом. В результате у вас получится похожий блок:

Изображение: Skillbox Media

Обратите внимание на скорости этих трёх фотографий. Стандартное значение скорости на снимке слева — 100, на среднем — 150 и на изображении справа — 200:

Изображение: Skillbox Media

Анимация логотипа

Логотип состоит из трёх частей: текста и двух стандартных шейпов жёлтого и зелёного цвета:

Изображение: Skillbox Media

Чтобы сделать такие же квадраты, у них нужно убрать заливку и добавить обводку:

1. Создайте шейп — нажмите на иконку + в левом верхнем углу и в выпадающем меню выберите Add shape.

2. У появившегося квадрата добавьте жёлтую обводку толщиной в 2 пикселя. В пункте BG color выделите цифровой код цвета и удалите его. По тому же принципу настройте зелёный квадрат.

Удаляем цвет заполнения шейпа и добавляем обводку. Изображение: Skillbox Media

3. Выделите жёлтый квадрат, в настройках Step-by-step добавьте шаг и настройте параметры Duration («Продолжительность») на 2,5 секунды, Rotate («Поворот») на 360 градусов и любое значение Easing («Смягчение»), чтобы конец и начало не обрывались резко.

Изображение: Skillbox Media

4. Протестируйте анимацию — в редакторе нажмите Play element. Имейте в виду, что анимацию на скролл вы так проверить не сможете.

Тестируем анимацию с помощью кнопки Play element. Изображение: Skillbox Media

5. Чтобы анимация повторялась бесконечно, в настройках анимации в пункте Loop укажите Loop.

Выбираем функцию Loop. Изображение: Skillbox Media

6. Сделайте то же самое с зелёным квадратом и проверьте результат, нажав кнопку Play all.

Изображение: Skillbox Media

Анимация фотографий

В последнем блоке фотографии плавно появляются одна за другой при скролле. Этот эффект выглядит интересно, и его можно сделать за пару кликов:

Изображение: Skillbox Media

1. В настройках Basic animation в выпадающем списке Animation выберите нужный эффект. В нашем случае — Zoom in.

Выбираем Zoom in. Изображение: Skillbox Media

2. Затем повторите настройки каждой иллюстрации, как на демонстрации ниже:

Изображение: Skillbox Media

3. Как и в предыдущих экранах, настройте продолжительность анимации, задержку, размер точки появления и отступ:

Изображение: Skillbox Media

Для одного объекта одновременно нельзя использовать и Basic animation, и Step-by-step animation — это особенность редактора.

Проверьте свою работу и сравните её с оригиналом:

Изображение: Skillbox Media
Освойте топовые нейросети за три дня. Бесплатно
Знакомимся с ChatGPT-4, DALLE-3, Midjourney, Stable Diffusion, Gen-2 и нейросетями для создания музыки. Практика в реальном времени. Подробности — по клику.
Узнать больше
Понравилась статья?
Да

Пользуясь нашим сайтом, вы соглашаетесь с тем, что мы используем cookies 🍪

Ссылка скопирована