Relax

Parallax é o efeito onde diferentes partes de uma página rolam em velocidades diferentes, de modo que o fundo passa mais devagar que o primeiro plano e a seção capta uma sensação de profundidade Relax extensão em Complementos Mestres para Elementor acrescenta que Rolagem de paralaxe de elementor efeito para qualquer elemento, uma imagem, um cabeçalho, uma coluna inteira, sem tocar em uma linha de JavaScript Ele aparece como uma seção na aba Avançado do elemento, com controles para velocidade, porcentagem de movimento, índice z e direção.

Aqui está onde Rellax vive, o que cada configuração faz e como o efeito parece uma vez que a página está ao vivo.

O que a extensão Rellax faz #

Rellax fixa uma animação baseada em scroll em qualquer elemento que você selecionar À medida que o visitante rola, esse elemento se move mais rápido ou mais devagar do que o resto da página, dependendo da velocidade que você definir Aponte para uma imagem de herói e o plano de fundo desliza; aponte-o para um título e o texto flutua à frente de tudo ao seu redor Uma vez que funciona por elemento, você pode misturar um par de velocidades diferentes na mesma seção e construir um scroll em camadas sem um plugin de paralaxe dedicado.

Pense nisso como o primo baseado em pergaminhos de duas outras ferramentas de movimento Master Addons: Efeitos Flutuantes, que anima um elemento por conta própria sem qualquer rolagem, e Transforma, que lida com girar, escalar e inclinar.

Antes de começar #

• WordPress com Elementor instalado e ativo.
• Complementos Mestres para Elementor instalado e ativo Se ainda não o instalou, siga o guia instalação.
• A extensão Rellax habilitada no painel de opções Master Addons.
• Um elemento para animar Qualquer widget Elementor ou Master Addons funciona, incluindo uma imagem, a Título do gradiente, ou uma seção.

Como adicionar um efeito de paralaxe no Elementor #

Selecione o elemento que deseja mover Abra o Avançado aba no painel Elementor e role para baixo até o Relax seção (ele carrega o emblema roxo Master Addons).Expanda-o e vire Habilitado Rellax para Sim. Essa alternância é a mudança para todo o efeito, então nada acontece até que esteja ligado.

Uma coisa que faz as pessoas tropeçarem: a paralaxe só é executada na página ao vivo ou na visualização, nunca enquanto você estiver editando na tela Então não espere o elemento se mover dentro do editor, clique em visualização para vê-lo.

Configurações de Rellax explicadas #

Com o Enabled Rellax ligado, o restante dos controles molda a forma como o elemento viaja:

• Velocidade: quão rápido o elemento se move em relação ao scroll Números positivos mais altos fazem com que ele suba mais rápido à medida que você rola para baixo; números negativos empurram para o outro lado A demo usa 6. Comece por volta de 4 a 6 e ajuste a partir daí, pois grandes valores podem tirar um elemento de sua seção.
• Porcentagem: o ponto de partida da animação, de 0 a 1, com base em onde o elemento fica na janela de visualização A demonstração define para 0,4. Empurre isso quando o efeito começar muito cedo ou tarde demais.
• Índice Z: ordem de empilhamento, mesma ideia do índice z CSS. Eleve-o (a demonstração usa 3) quando um elemento de paralaxe precisa ficar acima ou abaixo de um vizinho, ele se sobrepõe no meio do rolo.
• Vertical: mova o elemento para cima e para baixo enquanto a página rola Esta é a direção de paralaxe usual.
• Horizontal: mova o elemento para a esquerda e para a direita em vez disso. útil para elementos que você deseja deslizar de lado.

Velocidade e Porcentagem ambos têm o ícone responsivo ao lado deles, então você pode definir valores diferentes para desktop, tablet e celular Isso importa mais do que parece Uma velocidade que parece ótima em uma área de trabalho ampla pode parecer chocante em um telefone, onde a tela é curta e o elemento cobre muito terreno em um espaço pequeno Discar a velocidade do celular para baixo é geralmente a correção.

Veja o efeito de paralaxe na página ao vivo #

Publique a página (ou abra a visualização) e role O elemento que você ativou o Rellax em movimentos em seu próprio ritmo enquanto o resto da página rola normalmente, e essa diferença de velocidade é o que vende a profundidade Aqui está o herói da demonstração, com uma imagem de paralaxe rolando contra um título “Scroll UP”:

Se o movimento parecer muito forte ou muito sutil, volte ao controle Speed e ajuste-o Parallax é um daqueles efeitos em que um pequeno número geralmente lê melhor do que um grande.

Casos de uso comum #

• Fundos do herói: dê uma imagem de herói de landingpage uma deriva lenta para que a seção pareça viva no momento em que alguém rolar.
• Manchetes flutuantes: coloque Rellax em um título para que ele fique à frente do conteúdo abaixo dele.
• Seções em camadas: defina dois ou três elementos em velocidades diferentes na mesma seção para uma rolagem empilhada e com várias profundidades.
• Chamadas de recursos: deslize um ícone ou crachá horizontalmente à medida que o visitante o alcança.
• Páginas de contação de histórias: use uma paralaxe suave entre os blocos para evitar que um pergaminho longo fique plano.

Para movimentos que não estão vinculados à rolagem, combine Rellax com Entrada Animação assim, os elementos animam à medida que aparecem, depois continuam se movendo com paralaxe à medida que o pergaminho continua Navegue por completo widgets e extensões lista para ver o resto do kit de ferramentas de movimento.

Vídeo Tutorial #

Prefere assistir? este vídeo percorre a extensão Rellax de ponta a ponta, desde habilitá-la em um elemento até o pergaminho de paralaxe na página ao vivo:

Perguntas frequentes #

Embrulhando #

A extensão Rellax é a maneira mais rápida de adicionar um Rolagem de paralaxe de elementor efeito sem um plugin separado ou código personalizado Ative-o em qualquer elemento, defina a velocidade, porcentagem, índice z e direção, e o elemento rola com profundidade real na página ao vivo Para mais maneiras de mover as coisas pela tela, dê uma olhada Transforma e Efeitos Flutuantes, e verifique o página preços pelo que está incluído no Pro.