В
Триггерная анимация
Теперь по клику на один элемент можно запустить анимацию другого элемента в блоке.
Откройте страницу на экранах с разрешением более 1200px, чтобы протестировать анимацию.
CLIQUE EM MIM!
В
Триггерная анимация
Теперь по клику на один элемент, можно запустить анимацию другого элемента в блоке.
HOVER OVER!
Uma loja on-line oficial da Supreme
Design e promoção do aplicativo Music Daily
Eu e a Aviro sinergia para o Daily Mail
Aplicativo Web e móvel de ciclismo urbano
Conceito do site da Darrial
КАК ПОВТОРИТЬ АНИМАЦИЮ
1
Наведите курсор на любой из заголовков
- Acionador - Заголовок
- Evento - Hover
- Изображения - Eventos de ponteiro - Nenhum
- Etapa 1 - Duração 0; Opacidade 0
- Etapa 2 - Duração 0,1; Opacidade 100
- Evento - Hover
- Изображения - Eventos de ponteiro - Nenhum
- Etapa 1 - Duração 0; Opacidade 0
- Etapa 2 - Duração 0,1; Opacidade 100
Появление изображения при наведении на текст
Escolha qualquer projeto, passe o mouse sobre qualquer título
Trabalho para marcas comerciais
Retratos de amor e fotografia de moda
Também tirar fotos em eventos
КАК ПОВТОРИТЬ АНИМАЦИЮ
2
Наведите курсор на любой из заголовков
- Acionador - Заголовок
- Evento - Hover
- Etapa 1 - Duração 0; Opacidade 0
- Etapa 2 - Duração 0,1; Opacidade 100
- Evento - Hover
- Etapa 1 - Duração 0; Opacidade 0
- Etapa 2 - Duração 0,1; Opacidade 100
Появление изображения при наведении на текст
Inglês
Francês
Deutch
Espanhol
Italiano
Chinês
Наведите на любой из языков
Скажите приветствие на 6 популярных языках
КАК ПОВТОРИТЬ АНИМАЦИЮ
3
- Acionador - Заголовок с названием языка
- Evento - Hover
- Изображения - Eventos de ponteiro - Nenhum
- Etapa 1 - Duração 0; Opacidade 0
- Etapa 2 - Duração 0,1; Escala 250; Opacidade 100
- Evento - Hover
- Изображения - Eventos de ponteiro - Nenhum
- Etapa 1 - Duração 0; Opacidade 0
- Etapa 2 - Duração 0,1; Escala 250; Opacidade 100
Появление изображения с переводом при наведении на текст
FOTOGRAFIA
Casos de fotografia
Oferecemos a você muito mais do que apenas um ótimo quarto - há uma enorme variedade de espaços para estudar, fazer exercícios, relaxar e socializar.
ILUSTRAÇÃO
Ilustrações comerciais e pessoais
Oferecemos a você muito mais do que apenas um ótimo quarto - há uma enorme variedade de espaços para estudar, fazer exercícios, relaxar e socializar.
КАК ПОВТОРИТЬ АНИМАЦИЮ
4
Наведите курсор на любую из карточек
- Acionador - изображение
- Evento - Hover
- Etapa 1 - Duração 0; Opacidade 0
- Etapa 2 - Duração 0,1; Opacidade 100, Mover Y -50
- Evento - Hover
- Etapa 1 - Duração 0; Opacidade 0
- Etapa 2 - Duração 0,1; Opacidade 100, Mover Y -50
Появление плашки, заголовка и текста при наведении на изображение
NOVA POTÊNCIA EM ANIMAÇÃO
5
Наведите курсор на текст
КАК ПОВТОРИТЬ АНИМАЦИЮ
- Acionador - текст
- Evento - Hover
- Etapa 1 - Duração 0; Opacidade 0
- Etapa 2 - Duração 0,1; Opacidade 100
- Evento - Hover
- Etapa 1 - Duração 0; Opacidade 0
- Etapa 2 - Duração 0,1; Opacidade 100
Выделение текста. Появление желтых форм Shape под текстом
Chemex
A Chemex Coffeemaker é uma cafeteira manual de vidro no estilo pour-over, inventada por Peter Schlumbohm em 1941 e fabricada pela Chemex Corporation em Chicopee, Massachusetts. Em 1958, os designers do Instituto de Tecnologia de Illinois disseram que a Chemex Coffeemaker é "um dos produtos mais bem projetados dos tempos modernos" e está incluída na coleção do Museu de Arte Moderna de Nova York.
Наведите и кликните на слово Chemex
6
КАК ПОВТОРИТЬ АНИМАЦИЮ
- Acionador - текст
- Evento - Clique
- Etapa 1 - Duração 0; Opacidade 0
- Etapa 2 - Duração 0,1; Opacidade 100
- Evento - Clique
- Etapa 1 - Duração 0; Opacidade 0
- Etapa 2 - Duração 0,1; Opacidade 100
Появление появление белой карточки и текста при клике на заголовок
- Gatilho - текст
- Evento - Hover
- Etapa 1 - Duração 0; Opacidade 0
- Etapa 2 - Duração 0,1; Opacidade 100
- Evento - Hover
- Etapa 1 - Duração 0; Opacidade 0
- Etapa 2 - Duração 0,1; Opacidade 100
Появление линии подчеркивания под заголовком
7
КАК ПОВТОРИТЬ АНИМАЦИЮ
Кликните на A WAVE
- Acionador - Заголовок
- Evento - Clique
- Etapa 1 - Duração 0,1; Mover Y -100px
- Etapa 2 - Duração 0,1; Mover Y - 0
Atraso 0,2 / 0,4 / 0,6 / 0,8 / 1 / 1,2
- Evento - Clique
- Etapa 1 - Duração 0,1; Mover Y -100px
- Etapa 2 - Duração 0,1; Mover Y - 0
Atraso 0,2 / 0,4 / 0,6 / 0,8 / 1 / 1,2
Появление изображения при наведении на текст
8
Ruas de Berlim
Berlim é a capital e a maior cidade da Alemanha, tanto em área quanto em população. Seus 3.748.148 (2018) habitantes fazem dela a segunda cidade mais populosa da União Europeia, depois de Londres. A cidade é um dos 16 estados federais da Alemanha. É cercada pelo estado de Brandemburgo e contígua a Potsdam, a capital de Brandemburgo. As duas cidades estão no centro da região da capital Berlim-Brandemburgo, que, com cerca de seis milhões de habitantes e uma área de mais de 30.000 km², é a terceira maior região metropolitana da Alemanha, depois das regiões do Reno-Ruhr e do Reno-Meno.
O Portão de Brandemburgo é um monumento neoclássico do século XVIII em Berlim, construído por ordem do rei prussiano Frederico Guilherme II após a bem-sucedida restauração da ordem durante a Revolução Bataviana.
Bolinhos de massa doce, fritos em gordura ou óleo, recheados com geleia e cobertos com açúcar de confeiteiro. Também conhecidos simplesmente como "Berliner" ou, na parte oriental da Alemanha e na Baviera, são chamados de "Krapfen".
O alemão é a língua oficial e predominante falada em Berlim. É uma língua germânica ocidental que deriva a maior parte de seu vocabulário do ramo germânico da família de línguas indo-europeias.
Кликните на заголовок
КАК ПОВТОРИТЬ АНИМАЦИЮ
- Acionador - Заголовок и описание
- Evento - Clique
- Etapa 1 - Duração 0; Opacidade 0
- Etapa 2 - Duração 0,2; Mover Y -417; Opacidade 100
- Evento - Clique
- Etapa 1 - Duração 0; Opacidade 0
- Etapa 2 - Duração 0,2; Mover Y -417; Opacidade 100
Появление карточки при клике на текст
- Acionador - Заголовок и описание
- Evento - Clique
- Etapa 2 - Duração 0,2; Mover Y -145; Opacidade 0
- Evento - Clique
- Etapa 2 - Duração 0,2; Mover Y -145; Opacidade 0
Исчезновение описания при клике на него и заголовок
VAMOS LÁ!
Заменяйте элементы при клике или ховере
Наведите на любую из кнопок
HOVER ON
JOGAR
КАК ПОВТОРИТЬ АНИМАЦИЮ
9
- Gatilho - Кнопка 2 (на верхнем слое)
- Верхняя кнопка - Eventos de ponteiro - Nenhum
- Evento - Hover
- Etapa 1 - Duração 0; Opacidade 0
- Etapa 2 - Duração 0,1; Opacidade 100
- Верхняя кнопка - Eventos de ponteiro - Nenhum
- Evento - Hover
- Etapa 1 - Duração 0; Opacidade 0
- Etapa 2 - Duração 0,1; Opacidade 100
Появление одного элемента на месте другого
Составьте гид по содержанию страницы
Наведите на любой из разделов, чтобы узнать о нем больше
10
ÁRVORES
TERRA
PÁSSAROS
INSETOS
ÁGUA
Os insetos ou Insecta são invertebrados hexápodes e o maior grupo do filo artrópode. As definições e as circunscrições variam; geralmente, os insetos compreendem uma classe dentro dos Arthropoda.
Algumas aves, especialmente corvídeos e papagaios, estão entre os animais mais inteligentes; várias espécies de aves fabricam e usam ferramentas, e muitas espécies sociais transmitem conhecimento entre gerações, o que é considerado uma forma de cultura.
A pedosfera faz interface com a litosfera, a hidrosfera, a atmosfera e a biosfera. O termo pedolito, comumente usado para se referir ao solo, é traduzido como pedra moída no sentido de "pedra fundamental".
Na botânica, uma árvore é uma planta perene com um caule alongado, ou tronco, que sustenta galhos e folhas na maioria das espécies. Em alguns usos, a definição de árvore pode ser mais restrita
A água é uma substância química inorgânica, transparente, insípida, inodora e quase incolor, que é o principal constituinte da hidrosfera da Terra e os fluidos da maioria dos organismos vivos.
КАК ПОВТОРИТЬ АНИМАЦИЮ
- Trigger - Заголовок
- Event - Hover
- Тексты и карточки - Pointer Events-None
- Step 1 - Duration 0; Opacity 0
- Step 2 - Duration 0.3; Opacity 100
- Event - Hover
- Тексты и карточки - Pointer Events-None
- Step 1 - Duration 0; Opacity 0
- Step 2 - Duration 0.3; Opacity 100
Появление изображения при наведении на название
- Acionador - Заголовок
- Evento - Hover
- Etapa 1 - Duração 0; Opacidade 0
- Etapa 2 - Duração 0,3; Opacidade 100; Mover - 250
- Evento - Hover
- Etapa 1 - Duração 0; Opacidade 0
- Etapa 2 - Duração 0,3; Opacidade 100; Mover - 250
Появление карточки с текстом при наведении на название
Пример работы Триггерной анимации при наведении на элементы
Пример работы Триггерной анимации при клике на элементы
FUNCIONA!
CLIQUE AQUI
Как работает триггерная анимация
Добавьте два элемента (круг и кнопку) в Zero Block. Выделите круг и откройте настройки Пошаговой анимации.
В качестве EVENT выберите On Click (по клику) или On Hover (при ховере).
Кликните на Add Trigger в настройках, потом на кнопку CLIQUE AQUI. Вы выбрали кнопку триггерным элементом.
Добавляйте шаги анимации. Мы переместили желтый круг вправо на 600px при клике на кнопку.
Проверка
Триггерная анимация работает при клике или ховере на элементы
На один триггерный элемент можно назначить несколько разных анимаций
Для одной анимации можно назначить несколько разных триггеров
Разберемся на простом примере
