Что такое эффект при скролле в тильде
Перейти к содержимому

Что такое эффект при скролле в тильде

  • автор:

Эффекты появления при скролле в Тильде

Делать сайты не статичными — задача, практически, каждого дизайнера или вебмастера. Современный посетитель сайта становится все требовательнее. Поэтому и Тильда шагает в ногу со временем и предлагает различные виды анимации. В том числе, и анимацию появления объектов странице при скролле.

Такую анимацию появления можно сделать как в стандартных блоках, так и для Zero Block. Рассмотрим все способы отдельно.

Эффект появления элементов при скролле для стандартных блоков

В настройках почти каждого блока в Тильде есть раздел «Анимация»:

В нем можно настроить анимацию появления каждого элемента этого блока: Заголовок, Описание, Кнопка, Текст, Изображение.

Тильда предлагает нам такие варианты появления элементов при скролле:

  • прозрачность;
  • прозрачность (снизу);
  • прозрачность (сверху);
  • прозрачность (слева);
  • прозрачность (справа);
  • прозрачность (увеличение);

Эффект появления элементов при скролле для Zero Block

В Zero Block вы можете воспользоваться стандартной анимацией появления для каждого элемента или создать уникальный собственный.

Эффект наложения блока при скролле

Модификация добавляет эффект наложения одного блока на другой при скролле страницы. Применить можно к любым стандартным блокам и zero block, которые укажешь в коде. Демо решения.

Как сделать эффект наложения блока при скролле

Для реализации эффекта высота блока должна быть больше высоты экрана.

  1. Укажи в настройках id всех блоков через запятую, которым нужно добавить эффект.
  2. Скопируй этот код и вставь на свой сайт. Памятка по вставке кода.

Анимация появления текста

1. Расставляем текстовые блоки и добавляем над каждым текстом элемент Shape. Уменьшаем непрозрачность Shape до 90%.

2. В пошаговой анимации выставляем Event (событие) — on Scroll (при скролле), Start Trigger (начало триггера анимации) — on Window Top (от верхнего края экрана), Trigger Offset (отступ, задержка) — 200 пикселей. В первом шаге при дистанции 10 пикселей выставляем смещение вниз на 90 пикселей, чтобы полупрозрачный шейп перестал перекрывать текстовый блок.

3. Для следующих элементов выставляйте такие же настройки. Если вы хотите, чтобы следующий текстовый блок показывался быстрее, увеличьте значение Trigger Offset.

4. Чтобы при смещении вниз шейпы не перекрывали нижние элементы, откройте слои (ctrl (command) + L) и разместить верхние элементы под нижними.

Zero Block: пошаговая анимация

Посмотрите видеоурок о том, как работать с пошаговой анимацией в Zero Block или прочитайте подробную инструкцию ниже.

Внутри Zero Block есть два режима анимации:

1) Basic Animation — простая анимация. Это готовые, самые часто используемые эффекты, например, эффект появления (через прозрачность, снизу вверх, справа налево и т.д.), параллакс и фиксация. Их достаточно в 90% случаев.

2) Step-by-step Animation — пошаговая анимация. Позволяет реализовать яркие, креативные идеи по вашему сценарию.

Страница с примерами возможностей пошаговой анимации https://tilda.cc/ru/lp/step-by-step-animation/

Обзорная статья по основным возможностям
Статья о работе с контейнерами и созданию «резиновых» элементов
Cписок всех комбинаций для ускорения работы
Справка по простой анимации: фиксации, параллаксу и анимации появления
Справка по сложной триггерной анимации: настройка и примеры

Как автоматически импортировать макет из Figma в Zero Block

Определяем базовую структуру дизайна и ускоряем работу с макетом
Начало работы с пошаговой анимацией

Пошаговая анимация доступна в Zero Block — редакторе для профессиональных дизайнеров. Добавьте его на страницу из библиотеки блоков (в самом низу, после категории «Другое»). Или кликните на иконку Zero Block в меню быстрого добавления блоков внизу страницы.

Нажмите «Редактировать блок» в левом верхнем углу блока, чтобы перейти в режим редактирования.

Добавьте новый элемент, выделите его, откройте настройки, пролистайте до раздела Step by Step Animation и нажмите кнопку Add.

Создание пошаговой анимации отменит все настройки базовой анимации для элемента.
Выбор условия начала анимации

  • Element on Screen — анимация начинается при появлении элемента на экране;
  • Block on Screen — анимация начинается при появлении на экране всего текущего блока;
  • On Scroll — анимация запускается и продолжается во время скролла;
  • On Hover — анимация появляется при наведении на элемент;
  • On Click — анимация начинается при клике на элемент.

У начала анимации есть дополнительные опции Start Trigger, Loop и Trigger Offset.

  • Start Trigger — это то, к чему будет привязана анимация или что будет являться ее триггером. Есть выбор из трех областей — верхней границы (On Window Top), центра экрана (On Window Center) и нижней границы (On Window Bottom);
  • Trigger Offset — это смещение начала анимации объекта относительно выбранного Window Top / Window Center / Window Bottom;
  • Loop — это опция зацикливания анимации.

C помощью опции Test и кнопок Play Element / Play All можно проиграть анимацию этого элемента или всех элементов в блоке.

Добавление шагов анимации

Первый шаг, задан по умолчанию — это Start. Далее нужно добавлять шаги и на каждом шаге менять свойства элемента. Так элемент будет меняться.

Чтобы добавить шаг, нажмите на кнопку Add Step.

Между шагами можно переключаться. При этом синяя обводка элемента означает стандартное состояние, зеленая — редактирование шага.

Чтобы изменить начальное состояние объекта, например, чтобы объект в начале был невидим (значение Opacity равное нулю), нужно добавить первый шаг с этим состоянием и длиной (Duration) в 0 секунд.

У каждого шага есть набор свойств: Duration, Move, Scale, Opacity, Rotate, Easing и Delay.

Duration — длина анимации в секундах;
Move — координаты, куда передвигается элемент относительно начального расположения. Их можно задать как значениями, так и передвинуть элемент;
Scale — процент увеличения или уменьшения элемента к концу этого шага;
Opacity — значение прозрачности элемента к концу шага;
Rotate — поворот элемента в градусах к концу шага;
Easing — выбор эффекта выполнения анимации: Linear — это линейное выполнение анимации, easeIn, easeOut, easeInOut — это замедление в начале, конце или в начале и конце анимации, bounceFin — это небольшой отскок элемента в конце анимации;
Delay — задержка перед выполнением анимации.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *