Animação de gatilho
Agora, ao clicar em um elemento, você pode iniciar uma animação de outro elemento dentro do bloco.
Para testar a animação, abra a página em telas maiores que 1200px.
CLIQUE EM MIM!
Animação de gatilho
Agora, ao clicar em um elemento, você pode iniciar uma animação de outro elemento dentro do bloco.
HOVER OVER!
A loja on-line oficial da Supreme
Design e promoção do aplicativo The Music Daily
Sinergia entre mim e a Aviro para o The Daily Mail
Aplicativo web e móvel do City Cycling
O conceito do site da Darrial
COMECE A USAR O
COM SUA ANIMAÇÃO
COM SUA ANIMAÇÃO
1
Passe o mouse sobre qualquer título
- Trigger - Title
- Event - Hover
- Images - Pointer Events-None
- Step 1 - Duration 0; Opacity 0
- Step 2 - Duration 0.1; Opacity 100
- Event - Hover
- Images - Pointer Events-None
- Step 1 - Duration 0; Opacity 0
- Step 2 - Duration 0.1; Opacity 100
A imagem aparece ao passar o mouse sobre o texto
Trabalho comercial
Fotografia de retrato e moda
Fotografia de eventos
Escolha qualquer projeto, passe o mouse sobre qualquer título
COMECE A USAR O
COM SUA ANIMAÇÃO
COM SUA ANIMAÇÃO
2
Passe o mouse sobre qualquer título
- Trigger - Title
- Event - Hover
- Step 1 - Duration 0; Opacity 0
- Step 2 - Duration 0.1; Opacity 100
- Event - Hover
- Step 1 - Duration 0; Opacity 0
- Step 2 - Duration 0.1; Opacity 100
A imagem aparece ao passar o mouse sobre o texto
Diga olá em seis idiomas populares
COMECE A USAR O
COM SUA ANIMAÇÃO
COM SUA ANIMAÇÃO
Passe o mouse sobre qualquer ícone de idioma
Inglês
Francês
Deutch
Espanhol
Italiano
Chinês
3
- Trigger - Language title
- Images - Pointer Events-None
- Event - Hover
- Step 1 - Duration 0; Opacity 0
- Step 2 - Duration 0.1; Scale 250; Opacity 100
- Images - Pointer Events-None
- Event - Hover
- Step 1 - Duration 0; Opacity 0
- Step 2 - Duration 0.1; Scale 250; Opacity 100
A imagem com uma tradução aparece ao passar o mouse sobre o texto
FOTOGRAFIA
Exemplos de fotografia
Um bom portfólio on-line precisa de mais do que imagens. Siga nossas principais dicas para usar palavras e fotografias que contam uma história.
ILUSTRAÇÃO
Ilustração comercial e pessoal
Trabalhamos com clientes em esferas que vão desde publicidade e marcas até moda e varejo, entre outras.
COMECE A USAR O
COM SUA ANIMAÇÃO
COM SUA ANIMAÇÃO
4
Passe o mouse sobre qualquer cartão
- Trigger - Image
- Event - Hover
- Step 1 - Duration 0; Opacity 0
- Step 2 - Duration 0.1; Opacity 100, Move Y -50
- Event - Hover
- Step 1 - Duration 0; Opacity 0
- Step 2 - Duration 0.1; Opacity 100, Move Y -50
O fundo branco, o título e o texto aparecem ao passar o mouse sobre uma imagem
NOVA POTÊNCIA EM ANIMAÇÃO
5
Passe o mouse sobre o texto abaixo
COMECE A USAR O
COM SUA ANIMAÇÃO
COM SUA ANIMAÇÃO
- Trigger - Text copy
- Event - Hover
- Step 1 - Duration 0; Opacity 0
- Step 2 - Duration 0.1; Opacity 100
- Event - Hover
- Step 1 - Duration 0; Opacity 0
- Step 2 - Duration 0.1; Opacity 100
O texto é destacado. Caixas amarelas aparecem na página. Uma forma é exibida sob o texto.
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.
Aponte e passe o mouse sobre a palavra Chemex no título
6
COMECE A USAR O
COM SUA ANIMAÇÃO
COM SUA ANIMAÇÃO
- Trigger - Text copy
- Event - Click
- Step 1 - Duration 0; Opacity 0
- Step 2 - Duration 0.1; Opacity 100
- Event - Click
- Step 1 - Duration 0; Opacity 0
- Step 2 - Duration 0.1; Opacity 100
Um cartão branco com texto é exibido ao clicar no título
- Trigger - Text copy
- Event - Hover
- Step 1 - Duration 0; Opacity 0
- Step 2 - Duration 0.1; Opacity 100
- Event - Hover
- Step 1 - Duration 0; Opacity 0
- Step 2 - Duration 0.1; Opacity 100
O sublinhado sob o título aparece na página
7
COMECE A USAR O
COM SUA ANIMAÇÃO
COM SUA ANIMAÇÃO
Clique em A WAVE
- Trigger - Title
- Event - Click
- Step 1 - Duration 0.1; Move Y -100px
- Step 2 - Duration 0.1; Move Y - 0
A partir do segundo formulário Delay 0,2 / 0,4 / 0,6 / 0,8 / 1 / 1.2
- Event - Click
- Step 1 - Duration 0.1; Move Y -100px
- Step 2 - Duration 0.1; Move Y - 0
A partir do segundo formulário Delay 0,2 / 0,4 / 0,6 / 0,8 / 1 / 1.2
A imagem aparece ao passar o mouse sobre o texto
Ruas de Berlim
8
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.
Clique no título
COMECE A USAR O
COM SUA ANIMAÇÃO
COM SUA ANIMAÇÃO
- Trigger - Title and description
- Event - Click
- Step 1 - Duration 0; Opacity 0
- Step 2 - Duration 0.2; Move Y -417; Opacity 100
- Event - Click
- Step 1 - Duration 0; Opacity 0
- Step 2 - Duration 0.2; Move Y -417; Opacity 100
O cartão aparece ao clicar no texto
- Trigger - Title and description
- Event - Click
- Step 2 - Duration 0.2; Move Y -145; Opacity 0
- Event - Click
- Step 2 - Duration 0.2; Move Y -145; Opacity 0
A descrição desaparece ao clicar nela e o título
VAMOS LÁ!
Substituir elementos ao clicar ou ao passar o mouse
Passe o mouse sobre qualquer botão
HOVER ON
JOGAR
COMECE A USAR O
COM SUA ANIMAÇÃO
COM SUA ANIMAÇÃO
9
- Trigger - Button 2 (camada superior)
- Top Image - Pointer events-None
- Event - Hover
- Step 1 - Duration 0; Opacity 0
- Step 2 - Duration 0.1; Opacity 100
- Top Image - Pointer events-None
- Event - Hover
- Step 1 - Duration 0; Opacity 0
- Step 2 - Duration 0.1; Opacity 100
Substituição de um elemento por outro
Criar um guia de conteúdo de página
Passe o mouse sobre qualquer seção para saber mais
10
ÁRVORES
TERRA
PÁSSAROS
INSETOS
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
ÁGUA
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.
COMECE A USAR O
COM SUA ANIMAÇÃO
COM SUA ANIMAÇÃO
- Trigger - Title
- Event - Hover
- Step 1 - Duration 0; Opacity 0
- Step 2 - Duration 0.3; Opacity 100
- Event - Hover
- Step 1 - Duration 0; Opacity 0
- Step 2 - Duration 0.3; Opacity 100
A imagem aparece ao passar o mouse sobre o título
- Trigger - Title
- Event - Hover
- Textos e tags - Pointer Events-None
- Step 1 - Duration 0; Opacity 0
- Step 2 - Duration 0.3; Opacity 100; Move - 250
- Event - Hover
- Textos e tags - Pointer Events-None
- Step 1 - Duration 0; Opacity 0
- Step 2 - Duration 0.3; Opacity 100; Move - 250
O cartão com texto aparece ao passar o mouse sobre o título
Exemplo de efeito de animação de acionamento ao passar o mouse sobre os elementos
Exemplo de efeito de animação de acionamento ao clicar em elementos
CLIQUE AQUI
FUNCIONA!
Como funciona a animação de gatilho
Adicione um círculo e um botão em Zero Block. Selecione o círculo e abra as configurações da animação passo a passo.
Como um EVENTO, selecione On Click (Ao clicar) ou On Hover (Ao passar o mouse).
Clique em Add Trigger (Adicionar acionador) nas configurações e, em seguida, no botão CLICK HERE (Clique aqui). Você selecionou o botão como um acionador de animação.
Animação de adição passo a passo. Movemos o círculo amarelo 600px para a direita ao clicar no botão.
O efeito de animação do acionador funciona ao clicar ou ao passar o mouse
É possível atribuir várias animações a um único acionador
É possível atribuir vários acionadores para uma animação
Vamos estudar um exemplo simples
