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 Extensão Rellax em Complementos mestres Pro acrescenta que Rolagem de paralaxe de elementor efeito para widgets como uma imagem ou um cabeçalho, usando a biblioteca Rellax.js, sem tocar em uma linha de JavaScript Ele aparece como uma seção na guia 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 elementar instalado e ativo.
- Complementos mestres Pro instalado com uma licença ativa, uma vez que o Rellax é uma extensão Pro. Se ainda não o instalou, siga o guia instalação.
- A extensão Rellax habilitada no painel de opções Master Addons.
- Um widget para animar, como uma imagem, um ícone ou um Título do gradiente. Rellax move todo o widget, não uma imagem de fundo de 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 #
- Imagens de herói: dê a um widget de imagem em um herói de página de destino um desvio lento 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 #
Como adiciono um efeito de rolagem de paralaxe no Elementor?
Selecione um elemento, abra a guia Avançado, expanda a seção Master Addons Rellax e defina Enabled Rellax como Sim Em seguida, defina a Velocidade e a Porcentagem O elemento rola em seu próprio ritmo na página ao vivo, sem necessidade de código.
Por que não consigo ver o efeito de paralaxe no editor Elementor?
Rellax só é executado no front-end O elemento fica parado enquanto você edita na tela, então abra a visualização ou veja a página publicada para ver o movimento de paralaxe.
O que a configuração Velocidade faz em Rellax?
A velocidade controla a rapidez com que o elemento se move em comparação com o scroll da página Valores positivos mais altos o movem para cima mais rápido à medida que você rola para baixo, e valores negativos invertem a direção Valores em torno de 4 a 6 funcionam bem para a maioria das seções de heróis.
Posso usar uma velocidade de paralaxe diferente no celular?
Sim. Os controles Velocidade e Porcentagem são responsivos, então você pode definir valores separados para desktop, tablet e celular. Reduzir a velocidade no celular evita que o efeito pareça muito agressivo em telas pequenas.
A extensão Rellax atrasa meu site?
Rellax executa uma animação baseada em scroll por elemento, para que o impacto permaneça pequeno Aplique-o apenas aos elementos que precisam, em vez de todos os blocos da página, e as coisas permaneçam suaves.
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 veja o Página de extensão de paralaxe Rellax para uma comparação com Elementor Pro Motion Effects.
