Efeitos de rolagem de elementador: 16 animações de rolagem de imagem

Principais conclusões

• Os efeitos de rolagem de elementador no editor de estoque são seis controles em Avançado > Efeitos de movimento > Efeitos de rolagem (rolagem vertical, rolagem horizontal, transparência, desfoque, rotação e escala), e cada um move um único elemento.
• Os controles de efeitos de rolagem são um recurso do Elementor Pro e o plugin gratuito do Elementor 4.3.2 não os contém.
• Os 16 efeitos de rolagem de imagem nesta página são widgets do Master Addons Widget Builder que fixam um palco em tela cheia e animam todo um conjunto de imagens contra a posição de rolagem, incluindo um cubo 3 D, um livro de virar a página e um baralho de cartas de empilhamento.
• Cada um dos 16 widgets de rolagem tem seu próprio download zip contendo um arquivo JSON e um README, e o JSON é importado por meio de complementos mestres > Widget Builder > Import Widget, que aceita apenas arquivos.json.
• Cada um dos 16 widgets inclui uma regra de movimento preferencialmente reduzido, para que os visitantes que desligam o movimento em seu sistema operacional obtenham um layout estático em vez da animação.

Os efeitos de rolagem do elementor, como a maioria das pessoas os encontra, são os controles de Efeitos de rolagem no painel Efeitos de movimento: rolagem vertical, rolagem horizontal, transparência, desfoque, rotação e escala Cada um empurra uma única imagem ou título à medida que a página se move, e isso é até onde eles fixam uma seção enquanto um cubo gira dentro dele está além deles.

Este post mostra 16 animações de rolagem de imagem que funcionam nessa escala maior Cada um é um widget pronto para o Master Addons Widget Builder com uma demonstração ao vivo que você pode abrir antes de instalar qualquer coisa Abaixo você encontrará o que cada efeito faz, que tipo de site combina, como importar o conjunto e o que verificar se há velocidade e acessibilidade.

O que os efeitos de rolagem do Elementor podem fazer por conta própria

Os próprios efeitos de rolagem do Elementor alteram uma propriedade de um elemento à medida que o visitante rola Você seleciona um widget ou contêiner, aberto Avançado > Efeitos de movimento, ligue Efeitos de rolageme escolha entre seis opções. Página de ajuda de efeitos de movimento da Elementor lista-os como Rolo Vertical, Rolo Horizontal, Transparência, Desfoque, Rodar e Escala.

Esses controles pertencem ao Elementor Pro. Verificamos o plugin gratuito Elementor 4.3.2 e os controles de rolagem não estão nele.

Um efeito de rolagem só sabe sobre seu próprio elemento e a janela de visualização Não tem como manter uma seção no lugar enquanto o conteúdo dentro dela muda, e não pode coordenar dez imagens para que elas cheguem em ordem Paralaxe em uma imagem de herói é fácil de configurar dessa maneira Uma foto que se quebra em peças de quebra-cabeça e remonta como você lê precisa de um widget personalizado, que é o que o resto deste post cobre.

Se a paralaxe simples é tudo que você precisa, o Extensão Rellax em Master Addons trata disso, e nosso visão geral animação abrange efeitos de entrada e flutuação.

O que você precisa para executar esses widgets

Você precisa de Elementor, Master Addons e o Widget Builder O plugin Elementor gratuito é suficiente no lado Elementor, porque nenhum desses projetos usa widgets Elementor Pro ou seu painel Motion Effects.

Os widgets são importados e editados no Construtor de widgets0, que é uma funcionalidade do Master Addons Pro Os planos estão no página preços. Cada design abaixo tem seu próprio link de download próximo à sua demonstração ao vivo e não há portão de e-mail.

Você também vai querer suas próprias imagens As demos usam fotografias de domínio público e licenciadas abertamente, e cada widget tem campos de imagem ou um repetidor, então trocá-los leva alguns minutos.

As demonstrações ao vivo não precisam de nada instalado Abra um e role-o em alguns tamanhos de janela, que é a maneira mais rápida de saber se um estilo de movimento se adapta ao seu conteúdo.

16 efeitos de rolagem de imagem para Elementor

Os 16 efeitos de rolagem de imagem se dividem em cinco grupos: revelações fixadas, objetos 3 D, baralhos de cartas, galerias sem fim e layouts de índice ou loja A maioria deles usa a mesma base O widget se dá uma pista alta, prende um palco de uma tela dentro dela com posicionamento pegajoso e lê até onde você rolou pela pista para dirigir a animação Role de volta para cima e tudo joga ao contrário.

Imagem fixada revela

Estes quatro mantêm um quadro imóvel e mudam o que está dentro dele Eles se adequam a páginas de forma longa, onde cada imagem vem com um parágrafo.

1. Índice de Abertura

Cada entrada começa como uma fina faixa horizontal e abre para uma fotografia completa à medida que chega ao meio da tela, a maneira como um obturador de folhas se abre O título fica em toda a imagem e as entradas alternam para a esquerda e para a direita na página O quadro permanece preso enquanto seu texto rola para o passado, então solta.

É uma revelação de imagem em pergaminho com um solo escuro, por isso lisonjeia a fotografia noturna e fotos de produtos em preto Quatro a seis entradas é a faixa confortável.

2. moldura de telha

Um quadro permanece fixo à direita enquanto a cópia rola à esquerda À medida que cada novo bloco de texto chega, sua imagem desliza sobre o anterior dentro do mesmo quadro, como telhas em um telhado O fundo da página muda de cor a cada imagem.

A mudança de cor diz ao leitor que um novo capítulo foi iniciado, para que você possa soltar as divisórias e subtítulos Use-o para estudos de caso e faça tours com quatro ou cinco itens, cada um merecendo um parágrafo.

3. Capítulos em cauda de andorinha

Cada capítulo segura uma imagem cortada em pedaços de quebra-cabeça entrelaçados Eles começam espalhados e girados Rolagem os leva para casa, e a legenda aparece uma vez que a imagem está inteira.

A posição de cada peça é calculada a partir do deslocamento do pergaminho, de modo que a animação nunca corre à frente do leitor ou fica para trás Funciona bem para páginas de contar histórias com duas a quatro grandes imagens Eu não passaria de quatro, porque o truque se desgasta.

Grade de trama 4

A seção abre em uma fotografia com sangramento total Role e encolhe em seu lugar em uma grade de três colunas enquanto as outras fotos voam ao redor. Continue rolando e as linhas se separam para dar lugar a um título e a um botão.

Este é um herói forte para uma página inicial de loja ou estúdio, porque ele passa de um quadro geral para a coleção completa para um apelo à ação em uma única seção Para alternativas estáticas, consulte nosso Modelos de seção de heróis do elementor.

Efeitos de rolagem 3D

Estes quatro usam transformadas CSS 3 D e perspectiva, e a posição de rolagem os impulsiona Se você quiser 3 D que joga em um temporizador ou responde a setas, nosso guia para o Carrossel 3D do elementador cobre esse lado.

5. Cubo Facet

Seis fotografias sentam-se nas seis faces de um cubo O cubo gira uma face por trecho de pergaminho enquanto a fotografia que você está enfrentando se espalha por todo o fundo Um trilho de miniaturas à direita mostra onde você está e permite pular para qualquer rosto.

Seis é o limite rígido, uma vez que um cubo tem seis lados Isso o torna um ajuste legal para um conjunto de portfólio curto ou uma faixa de seis produtos.

Tubo de órbita 6

Anéis de cartões fotográficos ficam em torno de um eixo vertical, empilhados uns sobre os outros para formar um tubo. Você o vê de fora, de modo que a parede próxima passa grande pela tela e a parede distante mostra pequenas e escuras através das lacunas. Um globo de vidro fica no eixo da demonstração, e o widget oferece outros objetos centrais, incluindo um orbe, um átomo, um planeta anelado, um cubo de arame, uma imagem ou um ícone.

Precisa de muitas imagens para ler como um tubo, então pense em galerias de dezesseis ou mais.

7. Cremalheira de cavalete

Easel Rack é uma galeria de rolagem que fica em profundidade Cada imagem é uma placa afastada de você até que o pergaminho a coloque nivelada com o meio da tela, onde ela gira para ficar de frente para você As legendas ficam ao lado das placas e os itens ziguezagueiam para a esquerda e para a direita.

A demo percorre seis etapas de um ateliê de cerâmica, e esse é o uso natural para ela: etapas de processo ou uma lista numerada de serviços.

8. Livro de reclame

Um livro fechado abre enquanto você rola, depois vira uma página de cada vez Cada folha é impressa em ambos os lados e gira na lombada, então você vê o verso de uma página enquanto ela passa Role para cima e o livro fecha novamente.

A demo é um menu de restaurante com uma fotografia na página esquerda e pratos à direita Também se adequa a lookbooks e brochuras Com o JavaScript desligado, as páginas caem de volta para uma coluna simples em ordem de leitura, então nada está escondido dos motores de busca ou leitores de tela.

Decks de cartas

9. Deck de riffle

Este é o padrão de empilhamento de cartas em rolagem, feito com cartas de retrato Cada etapa de rolagem coloca a próxima carta no topo da pilha em um ligeiro ângulo A cor de fundo muda para corresponder a cada carta, e uma pequena barra de progresso conta através do conjunto.

Imagens de retrato funcionam melhor: cartazes, capas de livros, embalagens, telas de aplicativos Seis a oito cartões é sobre a direita.

10. Quebrar convés

Shatter Deck é um deck full-frame de fotografias, cada uma com uma legenda e um botão, e duas setas para se mover através delas O movimento entre imagens corta a imagem em uma grade de pequenos ladrilhos, espalha-os e os reúne novamente como a próxima fotografia.

Fora da caixa você se move através dela com as setas, um arrasto horizontal ou as teclas de seta uma vez que o deck tem foco A página mantém seu rolagem vertical normal Ative o Role para esfregar o controle e a rolagem impulsionam a transição em vez disso Com o movimento reduzido ativado, as telhas param de voar e o convés se desvanece.

Infinitas galerias de pergaminhos

Estes três loop Não há primeira ou última imagem, que se adapta mais à navegação do que à leitura.

11. Salão pendurado

Salon Hang é uma parede sem topo e sem fundo As imagens ficam penduradas em uma coluna, empurradas para a esquerda e para a direita do centro por diferentes quantidades e cortadas em diferentes larguras, a maneira como um salão pendurado lota uma parede da galeria Depois que a última foto vem a primeira novamente Clique em uma imagem e ela cresce em sua própria página com uma legenda e um botão Voltar.

Utilize-o para portfólios de fotografia onde a ordem não importa e cada imagem merece um olhar mais atento.

12. Fio de filamento

Fotografias do tamanho de selos postais são amarradas ao longo de um fio fechado que serpenteia através da tela Você viaja ao longo do fio por rolagem Onde quer que ele passe no meio do palco, as imagens incham como se sob uma lupa, e uma legenda nomeia o da frente Clique em uma fotografia para abri-lo.

É o melhor dos dezesseis para arquivos grandes, porque miniaturas pequenas significam que muitas imagens cabem na tela ao mesmo tempo. Sem JavaScript, o widget mostra todas as fotografias em uma grade simples.

13. Retratos de carretel

Reel Portraits mostra retratos em tela cheia, um de cada vez, em um loop Cada um carrega um único conjunto de palavras muito grande através dele, correndo lateralmente ao longo de uma curva como tipo em um tambor giratório, com uma linha manuscrita cruzando-o para o outro lado A fotografia se move com uma deriva de paralaxe atrás do tipo, e um índice numerado fica baixo à esquerda.

É o design mais alto dos dezesseis, e combina com sites de moda e editoriais Dê cinco ou seis imagens fortes e uma palavra cada.

Índices e layouts de lojas

14. Índice de fole

O Índice de fole mostra um corpo de trabalho uma entrada de cada vez Cada um tem um cabeçalho grande, duas placas sobrepostas da mesma imagem e uma legenda, e a página inteira leva uma nova cor para cada entrada O cabeçalho é definido em uma fonte variável, e o widget escreve a pressão de rolagem em seu eixo de largura, de modo que a palavra se estica e se instala à medida que você se move.

Ele lê melhor com quatro a oito entradas Experimente para uma exposição ou um conjunto de projetos em destaque.

15. Índice de Maré

Índice de Maré tem duas colunas que se movem uma contra a outra Os títulos correm para baixo à esquerda e as pessoas que os fizeram para baixo à direita Como você rolar, cada linha desliza lateralmente em uma onda, a coluna esquerda uma maneira e a direita seu espelho, enquanto uma fotografia para a linha atual se senta entre eles.

Este é liderado por tipo, com a imagem em um papel de apoio Ele se adequa a listas de crédito e índices de projetos longos.

16. Loja de Swatch

Swatch Shop é um corredor de fotografias de produtos que você caminha rolando enquanto um produto está na frente, toda a sala leva sua cor, e um cartão ao lado mostra o nome, uma breve descrição, o preço, opções de tamanho e um botão Uma coluna de pontos coloridos à direita marca seu lugar.

É construído para pequenos catálogos: floristas, cerâmicas, velas, estampas Sete produtos preenchem a demo.

Todos os 16 efeitos de rolagem em resumo

Use esta tabela para combinar um efeito de rolagem com o conteúdo que você tem As contagens de itens são o que o layout lida confortavelmente.

Baixe os 16 widgets de efeito scroll

Cada widget é um zip separado, então você só baixa os que planeja usar Cada zip contém dois arquivos: o JSON do widget e um README que lista seus controles.

Descompacte um arquivo antes de importá-lo O importador do Widget Builder lê arquivos.json e não aceitará o zip em si.

Como importar um widget de rolagem para o Elementor

Você importa cada widget através do Master Addons Widget Builder, em seguida, arrastá-lo para uma página como qualquer outro widget Elementor A coisa toda leva cerca de dois minutos por design.

1. Baixe o widget que você deseja e descompacte-o Dentro é um arquivo nomeado como widget-facet-cube.json, mais um README.
2. No seu painel WordPress, vá para Complementos mestres > Construtor de widgets e clique Importar Widget.
3. Arraste um arquivo.json para a área de upload ou clique Procurar arquivos e escolha. O importador pega um arquivo por vez, então repita isso para cada design desejado.
4. Abra qualquer página no Elementor e procure no painel de widgets o nome do design, por exemplo “Facet Cube” Arraste-o para um contêiner de largura total.
5. Substitua as imagens de demonstração e o texto na guia Conteúdo e defina cores e tipografia na guia Estilo.

Esses arquivos não passam pelos próprios Elementor Modelos > Importar tela. Esse importador é para modelos de páginas e seções, que abordamos como importar um modelo Elementor. Os widgets fixados também precisam de espaço Coloque-os em um recipiente definido para toda a largura sem preenchimento, ou o palco ficará dentro de uma coluna estreita e parecerá apertado.

Leia também: Como adicionar animação GSAP no elementor, se você gostaria de escrever sua própria animação acionada por rolagem do zero.

Widget de rolagem de imagem vs efeito de rolagem de imagem

Um widget de rolagem de imagem e um efeito de rolagem de imagem são duas coisas diferentes, e os nomes causam confusão Na maioria dos addons do Elementor, “Image Scroll” significa uma captura de tela alta dentro de um quadro fixo que desliza para cima quando você passa o mouse sobre ele As lojas de temas o usam para visualizar uma página longa em uma pequena caixa.

Um efeito de rolagem de imagem é uma animação vinculada ao rolagem de página: imagens que revelam, empilham, giram ou viajam à medida que o visitante desce a página Tudo neste post é do segundo tipo Se a visualização do hover for o que você veio buscar, você precisa de um addon com um widget Image Scroll, porque nenhum desses 16 faz isso.

Scrollytelling no Elementor

Scrollytelling é uma página onde a rolagem avança uma história: um visual fica preso enquanto o texto ao lado dele segue em frente, e o visual muda a cada passo Elementor pode fazer uma versão básica com uma coluna pegajosa A parte mais difícil é fazer o visual responder exatamente onde o leitor está.

Três desses widgets são construídos para ele Shingle Frame emparelha cada parágrafo com uma imagem que substitui o último, Dovetail Chapters monta uma imagem por capítulo enquanto você lê, e Quire Book vira uma página para cada seção Para uma história mais longa, empilhe dois deles em uma página com seções de texto comuns no meio, para que o leitor descanse do movimento.

Os efeitos de rolagem retardam seu site?

Os efeitos de rolagem diminuem a velocidade de um site quando são construídos descuidadamente, e os culpados habituais são imagens e animações de grandes dimensões que mudam o layout em cada quadro Esses widgets evitam o segundo problema Eles animam com transformadas CSS e opacidade, que o navegador pode entregar à placa gráfica, e eles usam um IntersectionObserver para saber quando o widget está na tela.

O peso da imagem depende de você, já que um widget que mostra doze fotografias carregará doze fotografias Exporte-as como WebP, dimensione-as para a maior dimensão em que aparecem e mantenha cada uma abaixo de cerca de 150 KB.

Na acessibilidade, todos os 16 widgets possuem um prefers-reduced-motion regra. Um visitante que pediu menos movimento ao seu dispositivo obtém um layout estático: Weft Grid mostra sua grade finalizada com o texto sobre ela e Shatter Deck se desvanece. Shatter Deck também é uma parada de guia real, então as teclas de seta funcionam quando ela tiver foco e não sequestrar a página de outra forma.

Para telefones, vários designs incluem seu próprio layout de tela estreita O Facet Cube move seu trilho de miniaturas para uma linha no pé do palco, e o Reel Portraits transforma seu índice em uma linha de números Ainda assim, teste o widget que você escolher em um telefone real antes de publicar Seções altas fixadas parecem mais tempo sob um polegar do que sob uma roda de mouse Se o seu site usa pontos de interrupção não padrão, nosso guia para Pontos de interrupção do elementor explica como ajustá-los.

Eu usaria um efeito de rolagem fixado por página, dois no máximo Cada estágio fixado adiciona distância de rolagem, e um visitante que tem que rolar através de três deles em uma fileira sentirá isso.

Perguntas frequentes

Pensamentos finais

Os efeitos de rolagem integrados do Elementor oferecem seis maneiras de mover um elemento, e eles vivem no Elementor Pro. Os 16 widgets aqui cobrem o chão além disso: quatro revelações fixadas, quatro peças 3 D, dois baralhos de cartas, três galerias sem fim e três layouts de índice ou loja, cada um com uma demonstração ao vivo e um fallback de movimento reduzido.

Para escolher uma, conte suas imagens e decida se o pedido delas é importante e escolha na tabela acima. Você pode alterar qualquer um desses designs ou construir um novo no Construtor de widgets.

Leitura relacionada

• Caixa de imagem do elementor: 16 designs com demonstrações ao vivo e download
• 20 modelos de controle deslizante de elementor: fluxo de cobertura, linha do tempo, depoimento e muito mais
• Carrossel Elementor 3 D: Coverflow, Flip, Arc e Orbit
• Extensão de efeitos de animação de 4 elementos sem código
• Elementor Marquee: Texto de rolagem infinito, logotipos e tickers