Блог Дмитрия Рыбалка

Анимация с текстом при наведении на карточку

2022-02-24 00:59 Анимация
Анимация карточки с уменьшением границы, увеличением фото и появлением текста с помощью пошаговой анимации в Zero Block.


Релизация.


Общее расположение блоков и слоёв
Общее расположение блоков и слоёв


Подготовка

  1. Добавить шейп с фотографией, например 720х600 px
  2. Сверху наложить пустой шейп 820х700 с белыми границами 50px, pointer events: none
  3. Выше добавить текстовый блок, pointer events: none

Общее расположение элементов
Общее расположение элементов


Создание анимации

  1. При наведении на шейп с фотографией добавляем анимацию увеличения на 110%
  2. К пустому шейпу добавляем анимацию уменьшения на 90% при наведении на шейп с фото
  3. К тексту добавить анимацию появления при наведении на шейп с фотографией

Шейп 720х600 с фотогрфией
Шейп 720х600 с фотогрфией
Шейп с берой границей 50px
Шейп с берой границей 50px
Текст с анимацией появления. Шаг 1/2.
Текст с анимацией появления. Шаг 1/2.
Текст с анимацией появления. Шаг 2/2.
Текст с анимацией появления. Шаг 2/2.


Готово! Получается лёгкая и стильная анимация карточки.