TRIGGER ANIMATION
Откройте новые возможности анимации для ваших проектов. Создайте анимацию элемента и назначьте другой элемент триггером. При клике или наведении на триггер запустится анимация первого элемента.
НАЖМИ!
Твоя задача внимательно слушать Анастасия Николаевну и повторить все виды анимации за урок!
Ученик
Учитель
1) При наведении на текст - появляется изображение
Чтобы повторить анимацию сделай следующее:
Добавь изображение и перейти в step by step animation
Event: on Hover (при наведении)
Добавь изображение и перейти в step by step animation
Event: on Hover (при наведении)
В данном случае триггером будет являться Текст (Заголовок). Чтобы добавить триггер нажми на +ADD Trigger, а потом нажми на текст (при наведении на который, появится картинка)
Чтобы повторить сделай следующее:
2) Появление изображения с переводом при наведении на текст
Чтобы повторить анимацию сделай следующее:
1) Добавь текст (язык: английский, французский, Итальянский)
2) Добавь изображение (на рабочем столе заготовлены картинки с переводом).
- Текст (english, french, italian) должен быть сверху картинки, но прятаться за черный круг).
1) Добавь текст (язык: английский, французский, Итальянский)
2) Добавь изображение (на рабочем столе заготовлены картинки с переводом).
- Текст (english, french, italian) должен быть сверху картинки, но прятаться за черный круг).
english
french
italian
Как это сделать?
Скажи Привет на разных языках:
Далее выбираем изображение с переводом и и перейти в step by step animation
Event: on Hover (при наведении)
+add trigger (кликаем на текст языка)
Step 1 — Duration 0; Opacity 0
Step 2 — Duration 0.1; Scale 110; Opacity 100
Event: on Hover (при наведении)
+add trigger (кликаем на текст языка)
Step 1 — Duration 0; Opacity 0
Step 2 — Duration 0.1; Scale 110; Opacity 100
Затем мы с помощью клавиши alt копируем и переносим изображение с переводом, только меняем его на другое изображение с нужным переводом.
Так наша анимация сохраняется, но важно поменять триггер на надпись с нужным языком!
Так наша анимация сохраняется, но важно поменять триггер на надпись с нужным языком!
Искусство:
«Мо́на Ли́за»
Художник:
Леонардо Да Винчи
Художник:
Леонардо Да Винчи
«Сон»
Художник:
Пабло Пикассо
Художник:
Пабло Пикассо
Как повторить анимацию?
- Добавь изображение с картиной (через шейп)
- Добавь из папки изображение (рамки с художником)
- Добавь сверху рамки текст с названием картины и именем художника.
- Добавь изображение с картиной (через шейп)
- Добавь из папки изображение (рамки с художником)
- Добавь сверху рамки текст с названием картины и именем художника.
Для текста с названием картины и именем художника будет такая же анимация.
Дальше всё просто: копируете объект, меняете изображение, в анимации меняете триггер на другую картину
Дальше всё просто: копируете объект, меняете изображение, в анимации меняете триггер на другую картину
Дальше:
- Пошаговая анимация рамки с художником
event: on hover
Step 1 — Duration 0; Opacity 0
Step 2 — Duration 0.1; Opacity 100, Move Y 80
- Пошаговая анимация рамки с художником
event: on hover
Step 1 — Duration 0; Opacity 0
Step 2 — Duration 0.1; Opacity 100, Move Y 80
СОЗДАВАТЬ
Tilda Publishing
АНИМАЦИЮ
ВЕСЕЛО!
Zero block
Click "Block Editor" to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.
Tilda Publishing
create your own block from scratch
