[Урок 58] Анимация плиток

Привет, сайтоделы! Я наконец-то нашёл время, чтобы вылезти из своей работы и заняться новыми уроками. Очень надеюсь, что ваш интерес к тильде не пропадает, а только растёт :)

Сегодня мы научимся делать очень крутую анимацию плиток. Поработаем с зависимой анимацией и разберёмся как работает этот популярный эффект. Погнали!

Открываем Zero Block и делаем заготовки

Переходим в проект и создаём нулевой блок. Без него никак. Я сделал простую заготовку плитки (фон, два текстовых блока и кнопка). Вот так это выглядит:

Вы же можете сделать плитку, сразу под свои нужды.

Сейчас плитка находится в итоговом состоянии (так она будет выглядеть после наведения на неё курсора). Нам нужно привести её к базовому состоянию. Для этого уменьшаем высоту фона:

Копируем блок фона, уменьшаем его и помещаем его вниз всей плитки. Таким образом, у нас получилось:

Переходим к анимации

Анимировать мы будем слой, на котором находится второй фон (блок фона, который меньше).

Открываем его настройки и переходим к пошаговой анимации.

Event: On hover (анимация будет срабатывать при наведении курсора)

Добавляем триггер. Нажимаем "Add trigger" и клацаем на основной блок фона.

Здесь мы возвращаемся к зависимой анимации. Для тех, кто не помнит, как она работает - советую перечитать урок: https://t.me/c/1236863784/116

Теперь выставим настройки анимации.

Duration: 0.4 - длительность (скорость анимации). Напоминаю, что она измеряется в секундах.

Scale: размер или увеличение объекта в %. Нам нужно работать с увеличением по оси Y (по высоте) и подогнать плитку так, чтобы она закрывала нашу кнопку.

Я поставлю 1000%.

Работаем с другими объектами

Теперь нам следует выставить ещё один параметр, у это плитки, кнопки и у текстовых блоков: POINTER EVENTS

Ставим его в положение NONE. Ранее мы не трогали эту настройку. Что она даёт? Блоки будут "прозрачными". Когда мы будем наводить курсор на текстовых блок - анимация заднего фона будет срабатывать.

Анимируем кнопку

Открываем настройки пошаговой анимации у кнопки. Повторяем примерно те же настройки, как у блока фона:

• Event: on hover
• Триггер на основной блок фона

Duration устанавливаем на 0

Opacity (прозрачность) устанавливаем на 0

Смещаем кнопку вверх на 20-30 пикселей

Итого, в первом шаге у нас получаются такие настройки:

Второй шаг:

• Duration: 0.3
• Opacity: 100% (проявляем нашу кнопку)
• Move X/Y : 0 (возвращаем её на место)

Сохраняем и смотрим, что у нас получилось:

Немного криво записал экран, но думаю суть ясна.

Проблема

При наведении на низ плитки - анимация пропадает. Как это исправить?

Добавляем ещё один блок фона

Делаем его белого цвета (в моём случае), либо же цвета вашего фона.

Нам нужно сделать так, чтобы анимация воспроизводилась при наведении на этот фон.

Меняем в настройках объектов триггер - делаем его на белый блок.

Ставим у основного блока фона - Pointer Events: none.

Готово. Сохраняем и проверяем:

Вот такую крутую анимацию можно сделать, буквально за 5-6 минут. Идею я взял у школы Молния. Это крутые ребята!)

Помните, что в зависимости от размеров ваших объектов настройки могут немного меняться. Не бойтесь экспериментировать.

Всем удачи! Ваш, сайтодел!

Ссылочка на канал: https://t.me/joinchat/AAAAAEm5CygRTnxzvi6hdQ