Hoje, vamos explorar como criar um efeito animado usando CSS no Elementor. A proposta é aprender passo a passo, sem enrolação, transformando uma imagem parada em algo dinâmico e interessante. O foco será em como adicionar e editar imagens, acessando o Custom CSS para começar a dar vida às animações. Para quem gosta de aprender novas técnicas ou aprimorar suas habilidades, este tutorial será útil e fácil de seguir.
Após adicionar a imagem no Elementor, a personalização começa com a criação da animação usando keyframes. Com movimentos de flutuação, escala e blur, o efeito ganha profundidade, mantendo-se ativo e cativante. O processo é simplificado, mas permite um toque criativo, garantindo que a animação se destaque em qualquer página.
Principais Pontos
- Tutorial ensina efeito animado no Elementor com CSS.
- A animação envolve movimentos de flutuação e transformação.
- Finalização permite personalização com efeitos adicionais.
Adicionando a Imagem ao Elementor
Primeiro, insira uma imagem no Elementor. Vamos usar uma imagem de um astronauta para tornar tudo mais interessante. Clique com o botão direito sobre a imagem e escolha Editar Imagem. Vá até a aba Avançado e depois em Custom CSS.
Aqui, você precisa digitar algumas informações CSS. Use selector para escolher a imagem e abra as chaves {}. Digite animation e nomeie como “flutuando”, ajustando o tempo para 5 segundos e defina infinite para que a animação continue sem parar.
Agora é hora de criar a animação. Utilize @keyframes e atribua o nome “flutuando”. Dentro da chave, use 0% e 100% com transform e translateY(-2px). Isso fará a imagem subir ligeiramente.
Para fazer com que a imagem também desça, adicione 50% com transform e translateY(200px). Agora a imagem flutuará continuamente. Você pode incrementá-la com efeitos adicionais, como escala e desfocagem. Tente definir scale para 1.2 e depois para 1.5, criando um efeito de aproximação e afastamento.
Também é possível aplicar um desfoque (blur) quando a imagem descer, para parecer que está se aproximando. Adicionalmente, introduza um efeito de rotação de 20 graus. Experimente utilizar filter: grayscale(1) para que a imagem mude para preto e branco quando aproximada. Essas personalizações podem ser continuadas com criatividade.
Acessando CSS Personalizado
Modificar a Imagem
Primeiro, adicione uma imagem usando o Elementor. Selecione a imagem desejada; por exemplo, uma imagem de astronauta pode ser interessante. Clique com o botão direito na imagem e escolha “Editar Imagem”. No menu que aparece à esquerda, clique em “Avançado” e encontre a seção “CSS Personalizado”.
Inserir CSS Personalizado
Na seção de CSS Personalizado, comece selecionando a imagem com a linha selector. A próxima parte consiste em criar uma animação. Dê um nome à animação, como “flutuando”, e defina a duração como 5 segundos. Use Infinity para que a animação se repita continuamente.
Crie a animação usando keyframes. O nome deve ser o mesmo que você escolheu, como “flutuando”. Inicie com 0% e 100%, aplique transform: translateY(-2px) para fazer a imagem subir, e em 50%, use translateY(200px).
Para mais aprimoramentos, você pode adicionar efeitos de escala, blur e rotação. Por exemplo, configure a escala para 1.2 ao descer, e 1.5 para aumentar o efeito. Pode-se também adicionar rotação de 20 graus, criando um efeito de movimento constante. Utilize filter: grayscale(1) para alternar entre preto e branco, e colorido, conforme desejado.
Criando a Animação
Escolhendo o Seletor
Para criar um efeito de animação em uma imagem usando CSS no Elementor, começa-se selecionando a imagem que deseja-se animar. Clique com o botão direito sobre a imagem e escolha “Editar Imagem”. Vá para a aba “Avançado” no menu que aparece e, em seguida, localize a opção de “CSS Personalizado“. O código CSS será inserido neste espaço.
Configurando os Parâmetros de Animação
Na área de “CSS Personalizado”, digite a palavra-chave selector para escolher o elemento que será animado. Crie uma animação usando a propriedade animation, escolha um nome para a animação, neste caso “flutuando”, defina a sua duração para 5 segundos e configure para que ela se repita indefinidamente, usando a palavra infinite.
Etapas da Animação
Definidos os keyframes, começa-se pelo 0% e 100%. Utilize o transform com translateY para ajustar o movimento vertical, colocando valores como -2PX para movimentação inicial e 200PX no ponto intermediário, 50%, para o efeito de descer. Pode-se incrementar a animação com transformações adicionais, como scale para aumentar e diminuir em certos pontos, blur para adicionar um leve desfoque quando a imagem está mais próxima, e rotate para criar um efeito de rotação. Para efeitos adicionais, explore opções de filtro como grayscale para alterar a cor da imagem, deixando-a preta e branca em momentos específicos da animação.
Efeitos de Animação
Efeito de Levitamento
Para criar um efeito de levitação, uma imagem é essencial. Ao selecionar a imagem, o CSS personalizado usa o comando transform: translateY. Isso faz a imagem se mover na direção vertical. Ajustar a movimentação em pixels determina a altura do levitamento. Este movimento, configurado como infinito, cria um ciclo contínuo e suave.
Efeito de Redimensionamento
Este efeito altera o tamanho da imagem. Usando o CSS, o tamanho original pode ser modificado à medida que a imagem se move. Definir valores como 1.2 e 1.5 amplia a imagem, criando um impacto visual dinâmico. Isso dá a sensação de aproximação e afastamento, adicionando profundidade ao design.
Efeito de Desfocagem
O efeito de desfoque é ativado quando a imagem se aproxima do campo de visão. No CSS, a propriedade blur é usada para aplicar diferentes níveis de desfoque. Isso simula a experiência visual de objetos se movendo para perto ou longe, contribuindo para uma apresentação mais realista.
Efeito de Rotação
Ao rotacionar uma imagem, o CSS utiliza o comando rotate. A rotação de 20 graus, por exemplo, dá um toque dinâmico à animação. Este efeito pode ser usado para dar movimento adicional e fazer com que a imagem se destaque mais ao ser visualizada.
Efeito Escala de Cinza
Esse efeito altera a cor da imagem, transformando-a em tons de cinza. Utilizando o comando filter: grayscale, a imagem parece preto e branco ao se aproximar e retorna à cor original ao se afastar. Isso não só trás um contraste visual, mas também chama a atenção durante a animação.
Fechamento e Dicas Adicionais
Adicionei uma imagem usando o Elementor para tornar o design mais envolvente. A imagem do astronauta foi escolhida para dar um toque especial. Usar o CSS personalizado faz toda diferença. Primeiro, clique com o botão direito na imagem e escolha a edição avançada em “Custom CSS”. A partir daí, crie uma animação simples com o código abaixo:
selector {
animation: flutuando 5s infinite;
}
@keyframes flutuando {
0%, 100% {
transform: translateY(-2px);
}
50% {
transform: translateY(200px);
}
}
Para dar mais vida, adicione efeitos extras. Experimente escala: quando a imagem desce, pode aumentar para 1.5 e depois voltar. Isso cria um efeito de aproximação e descontrole. Use o efeito de blur para um toque a mais enquanto a imagem se aproxima, e considere adicionar rotação para dar movimento.
Os efeitos continuam infinitamente se usar grayscale em filtros. Quando a imagem se aproxima, ela fica preta e branca, retornando à cor normal ao afastar. Essa é a hora de ser criativo e explorar mais possibilidades. Se surgirem dúvidas ou se o conteúdo agradar, os comentários e likes são sempre bem-vindos.
Relacionamento com a Comunidade
Tirando Dúvidas
Se alguém tiver alguma dúvida sobre como aplicar o efeito no Elementor, é só deixar um comentário. Participar dessa conversa ajuda a criar um lugar onde todos podem aprender e trocar ideias. Algumas perguntas e respostas comuns podem ser listadas para facilitar o entendimento:
- Como adicionar o código CSS?
- Onde exatamente colar o código CSS?
Quaisquer perguntas adicionais estão convidadas a serem postadas, e serão abordadas o mais rápido possível!
Incentivo à Participação
Participar ativamente nos comentários não só ajuda a esclarecer dúvidas, mas também enriquece a experiência de todos. Quanto mais pessoas interagirem compartilhando suas ideias e opiniões, mais criativo e dinâmico o processo se torna. Se gostou do vídeo, um simples like também ajuda!