Tilda
September 20, 2023

Анимация по ховеру из черно-белого в цветной на Tilda

Разбор анимации – при наведении черно-белое изображение становится цветным. Все просто и легко.

Шаг 1: Создаем Zero Block, задаем высоту блока, фон и загружаем изображение через Shape. Размеры shape ставим: W -670px, H – 340px (эти значение вы можете задать свои).

Шаг 2: Дублируем изображение. У дубля удаляем фон и задаем следующие характеристики:

Wight – 1200px

Height – 378px

Opacity – 0

Effect – Background Grayscale

Eff, Value – 100

Таким образом, изображение у сейчас выглядит черно-белым:

Шаг 3: Добавляем пошаговую анимацию:

Анимация готова.

Шаг 4: Добавляем другие элементы блока например, текст и меню. Характеристики можно увидеть в меню справа:

Шаг 5: Сохраняем, публикуем:

Анимацию можно посмотреть здесь Разбор анимаций (tilda.ws)

Исходник изображение скачать

Больше полезного материала: https://t.me/tilda_easy