В

Триггерная анимация

Tilda
TILDA ZERO BLOCK
Теперь по клику на один элемент можно запустить анимацию другого элемента в блоке.
Откройте страницу на экранах с разрешением более 1200px, чтобы протестировать анимацию.
CLICK ME!
В
Триггерная анимация
Tilda
TILDA ZERO BLOCK
Теперь по клику на один элемент, можно запустить анимацию другого элемента в блоке.
НАВЕДИТЕ КУРСОР ИЛИ КЛИКНИТЕ НА ЭЛЕМЕНТЫ, ЧТОБЫ ПОСМОТРЕТЬ РАБОТУ АНИМАЦИИ
HOVER OVER!
A Supreme official online store
Music Daily App design and promotion
Me and Aviro sinergy for Daily mail
City Cycling Web and Mobile App
Darrial Website concept
КАК ПОВТОРИТЬ АНИМАЦИЮ
1
Наведите курсор на любой из заголовков
- Trigger — Заголовок
- Event — Hover
- Изображения — Pointer Events-None
- Step 1 — Duration 0; Opacity 0
- Step 2 — Duration 0.1; Opacity 100
Появление изображения при наведении на текст
Choose any project, hover over any title
Work for Commercial Brands
Love Portraits and Fashion photography
Also take photos on events
КАК ПОВТОРИТЬ АНИМАЦИЮ
2
Наведите курсор на любой из заголовков
- Trigger — Заголовок
- Event — Hover
- Step 1 — Duration 0; Opacity 0
- Step 2 — Duration 0.1; Opacity 100
Появление изображения при наведении на текст
English
French
Deutch
Spanish
Italian
Chinese
Наведите на любой из языков
Скажите приветствие на 6 популярных языках
КАК ПОВТОРИТЬ АНИМАЦИЮ
3
- Trigger — Заголовок с названием языка
- Event — Hover
- Изображения — Pointer Events-None
- Step 1 — Duration 0; Opacity 0
- Step 2 — Duration 0.1; Scale 250; Opacity 100
Появление изображения с переводом при наведении на текст
PHOTOGRAPHY
Photography cases
We offer you much more than just a great bedroom — there's a huge range of spaces to study, exercise, relax and socialise.
ILLUSTRATION
Commercial and personal illustrations
We offer you much more than just a great bedroom — there's a huge range of spaces to study, exercise, relax and socialise.
КАК ПОВТОРИТЬ АНИМАЦИЮ
4
Наведите курсор на любую из карточек
- Trigger — изображение
- Event — Hover
- Step 1 — Duration 0; Opacity 0
- Step 2 — Duration 0.1; Opacity 100, Move Y -50
Появление плашки, заголовка и текста при наведении на изображение
NEW POWER IN ANIMATION
5
Наведите курсор на текст
КАК ПОВТОРИТЬ АНИМАЦИЮ
- Trigger — текст
- Event — Hover
- Step 1 — Duration 0; Opacity 0
- Step 2 — Duration 0.1; Opacity 100
Выделение текста. Появление желтых форм Shape под текстом
Chemex
The Chemex Coffeemaker is a manual pour-over style glass coffeemaker, invented by Peter Schlumbohm in 1941, manufactured by the Chemex Corporation in Chicopee, Massachusetts. In 1958, designers at the Illinois Institute of Technology said that the Chemex Coffeemaker is "one of the best-designed products of modern times" and it is included in the collection of the Museum of Modern Art in New York City.
Наведите и кликните на слово Chemex
6
КАК ПОВТОРИТЬ АНИМАЦИЮ
- Trigger — текст
- Event — Click
- Step 1 — Duration 0; Opacity 0
- Step 2 — Duration 0.1; Opacity 100
Появление появление белой карточки и текста при клике на заголовок
- Trigger — текст
- Event — Hover
- Step 1 — Duration 0; Opacity 0
- Step 2 — Duration 0.1; Opacity 100
Появление линии подчеркивания под заголовком
7
КАК ПОВТОРИТЬ АНИМАЦИЮ
Кликните на A WAVE
- Trigger — Заголовок
- Event — Click
- Step 1 — Duration 0.1; Move Y -100px
- Step 2 — Duration 0.1; Move Y - 0
Начиная со второй формы Delay 0,2 / 0,4 / 0,6 / 0,8 / 1 / 1.2
Появление изображения при наведении на текст
8
Berlin streets
Berlin is the capital and largest city of Germany by both area and population. Its 3,748,148 (2018) inhabitants make it the second most populous city proper of the European Union after London. The city is one of Germany's 16 federal states. It is surrounded by the state of Brandenburg, and contiguous with Potsdam, Brandenburg's capital. The two cities are at the center of the Berlin-Brandenburg capital region, which is, with about six million inhabitants and an area of more than 30,000 km² Germany's third-largest metropolitan region after the Rhine-Ruhr and Rhine-Main regions.
The Brandenburg Gate is an 18th-century neoclassical monument in Berlin, built on the orders of Prussian king Frederick William II after the successful restoration of order during the Batavian Revolution.
Sweet dough dumplings, fried in fat or oil, filled with jam and glazed with confectioner's sugar. Also known simply as "Berliner" or, in the eastern part of Germanyand in Bavaria, they are called "Krapfen".
German is the official and predominant spoken language in Berlin. It is a West Germanic language that derives most of its vocabulary from the Germanic branch of the Indo-European language family.
Кликните на заголовок
КАК ПОВТОРИТЬ АНИМАЦИЮ
- Trigger — Заголовок и описание
- Event — Click
- Step 1 — Duration 0; Opacity 0
- Step 2 — Duration 0.2; Move Y -417; Opacity 100
Появление карточки при клике на текст
- Trigger — Заголовок и описание
- Event — Click
- Step 2 — Duration 0.2; Move Y -145; Opacity 0
Исчезновение описания при клике на него и заголовок
LET'S GO!
LET'S GO!
Заменяйте элементы при клике или ховере
Наведите на любую из кнопок
HOVER ON
HOVER ON
PLAY
PLAY
КАК ПОВТОРИТЬ АНИМАЦИЮ
9
- Trigger — Кнопка 2 (на верхнем слое)
- Верхняя кнопка — Pointer events-None
- Event — Hover
- Step 1 — Duration 0; Opacity 0
- Step 2 — Duration 0.1; Opacity 100
Появление одного элемента на месте другого
Составьте гид по содержанию страницы
Наведите на любой из разделов, чтобы узнать о нем больше
10
TREES
GROUND
BIRDS
INSECTS
WATER
Insects or Insecta are hexapod invertebrates and the largest group within the arthropod phylum. Definitions and circumscriptions vary; usually, insects comprise a class within the Arthropoda.
Some birds, especially corvids and parrots, are among the most intelligent animals; several bird species make and use tools, and many social species pass on knowledge across generations, which is considered a form of culture.
The pedosphere interfaces with the lithosphere, the hydrosphere, the atmosphere, and the biosphere. The term pedolith, used commonly to refer to the soil, translates to ground stone in the sense "fundamental stone".
In botany, a tree is a perennial plant with an elongated stem, or trunk, supporting branches and leaves in most species. In some usages, the definition of a tree may be narrower
Water is an inorganic, transparent, tasteless, odorless, and nearly colorless chemical substance, which is the main constituent of Earth's hydrosphere, and the fluids of most living organisms.
КАК ПОВТОРИТЬ АНИМАЦИЮ
- Trigger — Заголовок
- Event — Hover
- Тексты и карточки — Pointer Events-None
- Step 1 — Duration 0; Opacity 0
- Step 2 — Duration 0.3; Opacity 100
Появление изображения при наведении на название
- Trigger — Заголовок
- Event — Hover
- Step 1 — Duration 0; Opacity 0
- Step 2 — Duration 0.3; Opacity 100; Move - 250
Появление карточки с текстом при наведении на название
Пример работы Триггерной анимации при наведении на элементы
Пример работы Триггерной анимации при клике на элементы
IT WORKS!
CLICK HERE
Как работает триггерная анимация
Добавьте два элемента (круг и кнопку) в Zero Block. Выделите круг и откройте настройки Пошаговой анимации.
В качестве EVENT выберите On Click (по клику) или On Hover (при ховере).
Кликните на Add Trigger в настройках, потом на кнопку CLICK HERE. Вы выбрали кнопку триггерным элементом.
Добавляйте шаги анимации. Мы переместили желтый круг вправо на 600px при клике на кнопку.
Проверка
Триггерная анимация работает при клике или ховере на элементы
На один триггерный элемент можно назначить несколько разных анимаций
Для одной анимации можно назначить несколько разных триггеров
Разберемся на простом примере
Создавайте яркие проекты с помощью пошаговой анимации в Tilda Zero Block!
Создать сайт
Made on
Tilda