Como usar Efeitos Parallax com Elementor

O Elementor Pro possui com um poderoso conjunto de controles para adicionar lindas transições e animações Parallax ao seu design.

Até agora, os webdesigners queriam incorporar animações e efeitos de movimento necessários para usar bibliotecas externas ou códigos personalizados.

Sempre usei o JetTricks e gosto muito dos efeitos que ele possui.

Conheça o Elementor Pro Parallax Motion Effects

Agora o Elementor Pro oferece uma solução completa para criar efeitos Parallax, animações e outros efeitos de movimento — todos perfeitamente integrados ao editor Elementor e utilizando recursos avançados de CSS.

Antes de testar, certifique-se de estar usando o Elementor Core v2.5.8.

Efeitos de Rolagem do Elementor Pro

Use efeitos de rolagem para criar animações e interações incríveis quando o usuário rola a página.

Veja uma lista dos efeitos de rolagem do Elementor Pro:

Efeitos Verticais do Elementor Pro

Como adicionar Efeitos Parallax com Elementor

Este é o efeito de paralaxe clássico pelo qual você estava esperando. A rolagem vertical faz o elemento se mover a uma velocidade diferente da da página durante a rolagem, na direção e velocidade de sua escolha.

Efeitos de Rolagem Verticais do Elementor Pro

Como adicionar Efeitos Parallax com Elementor

Rolagem horizontal significa quando o visitante rola para cima e para baixo, o elemento se move para a direita e para a esquerda de acordo. Um exemplo de uso — uma seção com nuvens que se move para a direita quando o visitante rola para baixo.

Efeitos de Transparência

A transparência permite tornar gradualmente os elementos mais transparentes ou mais visíveis em correlação com a rolagem do visitante. Um exemplo é que um título apareça e depois se dissolva de acordo com o pergaminho.

Como adicionar Efeitos Parallax com Elementor

Existem 4 direções de efeito possíveis:

  • Fade in — significa que o elemento começa como transparente e gradualmente se torna visível.
  • Fade out — O elemento começa como visível e gradualmente se torna transparente.
  • Fade out in — O elemento começa como visível, depois desaparece e fica visível novamente.
  • Fade in out — O elemento começa como transparente, torna-se visível e depois transparente novamente.

Efeitos de Blur no Elementor

Essa configuração é semelhante à Transparência, apenas em vez de transparência, o elemento fica desfocado. Um bom exemplo são as imagens de fundo, que recebem foco adequado apenas quando o usuário rola para baixo.

Efeitos de Mouse no Elementor Pro

Crie um senso de profundidade fazendo com que os elementos se movam em relação ao movimento do mouse do visitante.

Efeitos de 3D Tilt

0ljtskftqguhofdjm

Da mesma forma que Mouse Track move o elemento em relação ao movimento do mouse, o efeito 3D Tilt inclina o elemento de acordo com o mesmo movimento do cursor.

Um grande abraço e até a próxima!

Deixe uma resposta