Como usar efeitos de movimento para animar imagens (girar, dimensionar, rolar e transparência)

Publicados: 2019-05-06

Após a enorme resposta positiva que recebemos após nossos tutoriais de efeitos de movimento, decidimos reuni-los em um artigo que o ajudará a criar sites mais interativos com muita facilidade.

Vamos cobrir:

Efeitos de rotação, horizontal e escala
Efeito de transparência da imagem
Girar e dimensionar imagens
TRUQUE BÔNUS: efeito de sobreposição de texto animado

Então, vamos indo ...

Animação de imagem: girar, rolagem horizontal, rolagem vertical e escala

Neste vídeo, você aprenderá como adicionar efeitos de rolagem aos designs do Elementor que fazem com que as imagens pareçam balançar, deslizar, flutuar ou avançar conforme um visitante rola a página para baixo.

1. Rotação de imagem: Fazendo balançar as imagens

Para fazer uma imagem oscilar, clique na guia Avançado, abra a seção Efeitos de movimento e ative os efeitos de rolagem .

Em seguida, clique na opção Girar e escolha em qual direção girar sua imagem.

Para tornar a animação mais suave, defina também o controle deslizante Velocidade para 1 .

Finalmente, você pode deixar a janela de visualização configurada com os padrões - 0% e 100%:

how-to-add-scrolling-effects-to-your-website

Finalmente, defina o ponto de ancoragem Y para cima para fazer sua imagem "balançar" de cima para baixo.

2. Rolagem horizontal da imagem: Como fazer deslizar as imagens

Para fazer um slide de imagem, ative os efeitos de rolagem como você fez na seção anterior. Em seguida, ative a Rolagem horizontal e:

Escolha a direção em que deseja que sua imagem deslize
Defina a velocidade para 10

how-to-add-scrolling-effects-to-your-website-2

E é isso! Sua imagem deslizará conforme um visitante rola a página para baixo.

3. Rolagem vertical da imagem: como fazer as imagens flutuarem

Para fazer uma imagem flutuar, ative os efeitos de rolagem . Em seguida, ative a Rolagem vertical e defina a direção igual a Para baixo

how-to-add-scrolling-effects-to-your-website-3

E é isso! Você pode deixar as outras configurações como padrão.

4. Escala de imagem: Como criar um zoom de imagem

Com este último, parecerá que a imagem está se movendo em direção ao visitante conforme o visitante rola para baixo. Outra maneira de pensar nisso é como a imagem “afundando”.

Para começar, ative os efeitos de rolagem . Em seguida, ative Rolagem vertical e:

Defina a direção para Baixo
Defina a janela de visualização entre 0% e 40%

how-to-add-scrolling-effects-to-your-website-4

Em seguida, clique na opção Escala e defina a Velocidade igual a 6 . Além disso, use a configuração Viewport para definir os 20% inferiores e os 80% superiores .

E é isso.

Agora que você sabe como usar efeitos de rolagem, experimente seus próprios designs para criar algo incrível!

Transparência da imagem: faz com que imagens e fundos desapareçam na rolagem

Neste vídeo, você aprenderá como usar as configurações da janela de visualização para criar efeitos interessantes de movimento à medida que os visitantes navegam em seu site. Você pode aplicar efeitos de movimento a planos de fundo e seções, bem como widgets individuais, o que lhe dá muita flexibilidade para os tipos de efeitos que você cria. Para começar:

Selecione uma imagem
Vá para a guia Avançado
Encontre a seção de efeitos de movimento
Ativar efeitos de rolagem

Em seguida, ative a Rolagem horizontal para fazer sua imagem se mover da esquerda para a direita conforme os usuários rolam para baixo na página. Você também pode ajustar a configuração de velocidade para fazer o movimento acontecer mais rápido ou mais lento:

how-to-use-motion-effects-viewport-settings-1

A seguir, vamos examinar a opção Viewport e ver como ela funciona.

Primeiro, é importante definir o termo - a janela de visualização de um visitante é o tamanho visível da tela do dispositivo de um usuário .

As opções de viewport permitem escolher quando começar e parar o seu efeito de rolagem escolhidos com base na janela de um visitante:

Por exemplo, se você definir a parte inferior da janela de visualização como 0% e a parte superior como 100%, a imagem começará a se mover assim que se tornar visível na parte inferior da janela de visualização do visitante. Além do mais, a imagem alcançará sua posição “original” quando estiver no meio da janela de visualização do visitante ( ou, 50% ), e continuará se movendo até chegar ao topo (100%).

Então, aqui está todo o efeito em detalhes:

A imagem começará à esquerda da posição original quando aparecer pela primeira vez na janela de visualização de um visitante (janela de visualização do visitante em 0% )
Ele alcançará sua posição original no meio da janela de visualização do visitante (janela de visualização do visitante em 50% )
Ele continuará deslizando para a direita de sua posição original conforme o visitante continua rolando ( até atingir 100%)

how-to-use-motion-effects-viewport-settings-2

Por outro lado, se você definir a parte inferior da janela de visualização como 50% e a parte superior como 100%:

A imagem começará em sua posição original.
Assim que a imagem estiver no meio da janela de visualização do visitante (50%), ela começará a se mover para a direita até que a imagem alcance o topo da janela de visualização do visitante (100%).

Vejamos outro tipo de efeito de rolagem para mostrar como funciona a janela de visualização ...

Exemplo de efeito de transparência

Para este exemplo, ative a opção Transparência e:

Defina a direção para Fade In
Defina o nível para 10 ( isso torna a imagem muito transparente no início )

Se você definir a janela de visualização Bottom para 0% e a Top para 100%, a imagem será transparente quando aparecer pela primeira vez na parte inferior da janela de visualização de um visitante (0%). Conforme a imagem se move para cima, ela se torna menos transparente, atingindo sua aparência original quando atinge o topo da janela de visualização do visitante (100%). Se você quiser reverter isso, poderá escolher Fade Out . Em seguida, a imagem aparecerá normal no início e aumentará em transparência conforme o visitante rola para baixo. Finalmente, outra opção é Fade Out In . Com este, a imagem irá esmaecer para começar e, em seguida, voltar à medida que o visitante continua a rolar. Se você definir a janela de visualização Bottom para 40% e Top para 60% com Fade Out In , então:

A imagem desaparecerá de 0% a 40%
Ele permanecerá desbotado entre 40% a 60%
Assim que atingir 60%, começará a desaparecer novamente entre 60% e 100%

how-to-use-motion-effects-viewport-settings-3

Agora que você sabe como funciona a configuração da janela de visualização , pode experimentar diferentes configurações para encontrar o efeito que deseja.

Use os pontos de ancoragem X e Y nos efeitos de rotação e escala

Neste vídeo, você aprenderá sobre os pontos de ancoragem X e Y para os efeitos Girar e Dimensionar nos Efeitos de movimento do Elementor.

No final, você saberá como aplicar essas configurações para criar alguns efeitos de movimento interessantes em seu site.

Para começar, selecione a imagem à qual deseja adicionar efeitos e:

Vá para a guia Avançado
Encontre as configurações de efeitos de movimento
Ativar efeitos de rolagem

Pontos âncora no efeito de rotação

Vamos começar com o efeito Girar. Clique no ícone de lápis ao lado do efeito Girar para ativá-lo - você pode deixar as configurações como padrão. Em seguida, procure as configurações de Ponto de âncora X e Ponto de âncora Y que aparecem abaixo. Os pontos de ancoragem X e Y determinam o eixo em torno do qual uma imagem gira. Por padrão, ambos são definidos como Centro , o que significa que a imagem irá girar como se houvesse um “alfinete” no centro da imagem. No entanto, alterar o ponto de ancoragem X e / ou Y causará diferentes efeitos de rotação. Por exemplo, se você definir o ponto de ancoragem X para a esquerda e o ponto de ancoragem Y para o topo, a imagem irá girar em torno do canto superior esquerdo desta forma:

Ou, se você definir o ponto de ancoragem X no centro e o ponto de ancoragem Y no topo, a imagem girará como se fosse uma pintura que você pendurou no topo. Teve a ideia? Vejamos mais um. Se você alterar o ponto de ancoragem X para a direita, agora a imagem começará a girar como se estivesse fixada no canto superior direito. Vamos resumir isso. O ponto de ancoragem X determina a posição no eixo x em torno do qual a imagem gira:

E o ponto de ancoragem Y faz a mesma coisa para a orientação vertical:

Pontos âncora no efeito de escala

Agora que você entende o conceito básico, vamos ver como essa mesma ideia funciona com o efeito Escala .

Para começar, desative o efeito Girar, ative o efeito Escala e:

Defina a direção para aumentar a escala
Defina a velocidade para -5

Por padrão, o Ponto de âncora X e o Ponto de âncora Y são definidos como Centro , o que significa que a imagem é dimensionada para baixo em direção ao centro do widget de imagem.

Por outro lado, se você definir os pontos de ancoragem como Esquerda e Superior , a imagem será reduzida em direção ao canto superior esquerdo.

É exatamente a mesma ideia do efeito de rotação.

Agora que você sabe como os pontos de ancoragem X e Y funcionam, vá em frente e brinque com essas configurações para criar o efeito exato que deseja.

TRUQUE BÔNUS: Efeito de sobreposição de texto animado

Neste vídeo, você aprenderá a usar o recurso de rolagem horizontal nos efeitos de movimento do Elementor para criar um efeito de texto animado bacana em seu site.

Você poderá fazer com que o texto se mova pela página à medida que os visitantes rolarem. E com alguns ajustes, você pode até fazer o texto mudar de cor conforme ele se move.

Para este exemplo, vamos cobrir como criar vários títulos animados:

Um título cinza simples que se move para a direita e permanece da mesma cor
Um título branco e rosa que se move para a esquerda e muda de branco para rosa quando cruza o fundo rosa

Criando o primeiro cabeçalho - apenas movimento

Vamos começar com o título em cinza sólido.

Selecione o título e:

Vá para a guia Avançado
Encontre a seção de efeitos de movimento
Ativar efeitos de rolagem

Em seguida, clique no lápis ao lado do efeito Rolagem horizontal para inserir suas configurações:

Altere a direção para a direção em que deseja que seu texto role ("Para a direita" em nosso exemplo)
Deixe as configurações de velocidade e janela de visualização como padrão

E é isso! Seu título deslizará para a direita conforme um visitante rola a página para baixo.

Criação do segundo cabeçalho - mudança de movimento e cor

Agora, vamos avançar um pouco mais e fazer com que o cabeçalho mude de cor conforme ele se move. Este processo envolve:

Criação de seções internas duplicadas
Usando a opção Overflow: Hidden para ocultar o título de uma das seções, uma vez que ele passa fora da seção interna

Para começar, adicione um novo widget Inner Section à seção onde deseja colocar o cabeçalho e, em seguida, exclua a coluna da esquerda. Em seguida, defina a altura mínima igual a 450 px:

Em seguida, vá para a guia Estilo e defina a cor de fundo como rosa. Por fim, vá para a guia Avançado e defina o preenchimento esquerdo para 33%. Em seguida, adicione o widget Título e estilize-o de acordo com sua preferência. Você deve ter o título dentro da seção interna como este:

Agora, edite o widget Título e ative os Efeitos de Rolagem na guia Avançado . Em seguida, ative a configuração Rolagem horizontal e deixe as opções como padrão.

Agora, seu cabeçalho se moverá para a esquerda, mas ainda não mudará de cor. Você pode ver que ainda está branco, mesmo no fundo branco.

Vamos consertar isso ...

Em seguida, duplique a seção interna. Agora, você terá duas seções internas e títulos idênticos. Você pode usar o Navegador para renomear as seções para ajudá-lo a lembrar quais são quais:

Agora, vá para a seção interna inferior ( a duplicata ) e mude sua cor de fundo para branco. Você também deseja alterar a cor do título para a mesma cor do plano de fundo em sua seção interna original. Em seguida, adicione uma margem superior negativa de 450 px à seção interna inferior. Agora, a seção interna inferior ( duplicada ) deve aparecer “em cima” da seção interna original. Para corrigir isso, defina o Z-Index para a seção duplicada como 1 e defina o Z-Index para a seção original como 2 . Em seguida, você precisa se certificar de que apenas o cabeçalho rosa aparece quando ele se move para fora da largura da seção interna. Você pode ver um exemplo do que queremos abaixo:

Para obter este efeito, vá para as configurações da seção interna original . Na guia Layout , encontre a opção Overflow e defina-a como Oculto .

E é isso! Agora, apenas o título da seção duplicada aparecerá depois de rolar para além da seção interna, o que cria o efeito de texto de mudança de cor elegante.