--- title: "Efeitos de scroll avancados no Elementor em 5 passos" description: "Efeitos de scroll avancados são movimentos que o navegador dispara conforme o visitante rola a página, ligados à posição da barra de rolagem em vez de." url: https://full.services/efeitos-de-scroll-avancados/ date: 2026-06-27 author: "Clayton Margiotti" --- # Efeitos de scroll avancados no Elementor em 5 passos **Efeitos de scroll avancados** no Elementor são parallax, sticky e transparência que reagem à rolagem usando só transform e opacity. Segundo a [web.dev](https://web.dev/articles/vitals) (2026), um INP bom fica em 200 ms ou menos e o CLS em 0,1 ou menos. Empilhar efeitos em mobile estoura esses limites. Comece pelo nativo do PRO. Efeitos de scroll avancados são movimentos que o navegador dispara conforme o visitante rola a página, ligados à posição da barra de rolagem em vez de a um clique. No Elementor, eles vivem no painel Motion Effects e cobrem parallax, transparência, rotação, escala e sticky. Para aplicar efeitos de scroll avancados sem travar o site, você precisa entender o que cada tipo custa em quadros por segundo, porque rolagem trêmula afunda os Core Web Vitals antes de impressionar qualquer pessoa. Este guia mostra o que o Elementor PRO já faz nativo, quando um addon compensa e como manter 60 fps. Faz parte do nosso [guia para dominar o Elementor](https://full.services/guias/domine-o-elementor). --- ## Os 4 tipos de efeitos de scroll avancados no Elementor Existem quatro tipos de efeitos de scroll avancados no Elementor, e o custo de cada um muda conforme a propriedade que ele anima. O parallax desloca o elemento em velocidade diferente do resto; a transparência muda a opacidade conforme a rolagem; o sticky fixa a seção na viewport por um trecho; e o horizontal scroll move o conteúdo de lado. Parallax e sticky são os que mais pesam em mobile. A regra técnica que separa o efeito fluido do travado é direta: animar `transform` e `opacity` mantém o trabalho no compositor da GPU, sem reflow. Animar `top`, `left` ou margem força recálculo de layout a cada quadro.
Efeitos de scroll avancados: tipos, onde configurar e custo
Tipo de efeito Onde configurar no Elementor Custo de performance
Parallax vertical Avançado, Motion Effects, Efeitos de Rolagem Médio: usa transform, cuidado em mobile
Transparência Motion Effects, controle Transparency Baixo: anima só opacity
Sticky Avançado, Motion Effects, Sticky Médio: recalcula posição na rolagem
Horizontal scroll Addon (JetTricks, Happy Addons) Alto: exige JavaScript extra

Legenda: os efeitos de scroll avancados nativos ficam agrupados em Motion Effects, na aba Avançado.

## Por que animar transform e opacity define se a rolagem trava Animar `transform` e `opacity` é o que decide se os efeitos de scroll avancados rodam fluidos ou derrubam quadros, porque só essas duas propriedades pulam o recálculo de layout e vão direto ao compositor. A 60 fps o navegador tem 16,66 ms por quadro, e sobram cerca de 10 ms para o seu trabalho depois do que o próprio sistema consome. Cada elemento animado disputa esse orçamento. O Elementor PRO já constrói os Efeitos de Rolagem nativos sobre `transform` e `opacity`, então o parallax e a transparência nascem otimizados. O problema surge quando o usuário empilha CSS personalizado animando posição ou tamanho. A gente vê no suporte da FULL que a maior parte das queixas de "site engasgando ao rolar" vem de scroll effects ativos em várias seções ao mesmo tempo, não de um efeito isolado. Dez elementos competindo pelos 10 ms úteis estouram o quadro. Para medir o impacto, revise os [Core Web Vitals](https://full.services/glossario/core-web-vitals/) e entenda como o [CLS](https://full.services/glossario/cls/) reage a movimento inesperado. ## Recursos nativos do Elementor PRO para efeitos de scroll avancados O Elementor PRO entrega cinco efeitos de scroll avancados sem addon, e isso resolve a maioria dos projetos reais. Dentro de Motion Effects, os Efeitos de Rolagem incluem Deslocamento Vertical (parallax), Deslocamento Horizontal, Transparência, Desfoque, Rotação e Escala, todos atrelados à posição da rolagem. O controle de viewport define em que trecho da tela o efeito acontece. Antes de instalar qualquer plugin, configure o nativo: na aba Avançado de uma seção ou widget, abra Motion Effects, ative Efeitos de Rolagem e escolha o tipo. Cada efeito tem amplitude (Velocidade) e direção. Mantenha o parallax em amplitude baixa, entre 2 e 4 níveis, porque acima disso o deslocamento fica exagerado e chama atenção pela razão errada. O sticky, configurável no mesmo painel, fixa a seção e libera depois de um trecho definido. Para o builder não pesar na edição, o [WP Rocket com Elementor](https://full.services/como-configurar-o-wp-rocket-com-elementor-e-woocommerce/) reduz a lentidão de carregamento que costuma confundir-se com efeito travado. ## Passo a passo: Como aplicar efeitos de scroll avancados no Elementor Aplicar efeitos de scroll avancados no Elementor leva cerca de 20 minutos por seção e segue uma ordem de maior retorno: transparência primeiro, porque é a mais barata, depois parallax com moderação, sticky onde fizer sentido e horizontal scroll só com addon. Teste cada efeito no preview de mobile antes de publicar. A sequência abaixo usa apenas o Elementor PRO, sem código. ### Passo 1: Ative os efeitos de rolagem na aba avançado A base dos efeitos de scroll avancados é o painel Motion Effects. Selecione a seção, abra a aba Avançado e clique em Motion Effects. Ative "Efeitos de Rolagem" e escolha o primeiro tipo, de preferência Transparência, que anima só `opacity`. Defina a Velocidade num valor baixo e ajuste a Viewport para que o efeito comece e termine dentro da área visível, evitando saltos bruscos quando a seção entra na tela. ### Passo 2: Configure o parallax com amplitude baixa No mesmo painel, ative Deslocamento Vertical para criar o parallax. Mantenha a amplitude entre 2 e 4 e defina a direção conforme o layout. Aplique o efeito ao fundo da seção ou a uma imagem, não ao bloco de texto, porque mover texto durante a leitura prejudica a experiência. Combine parallax com transparência na mesma seção com parcimônia, já que dois efeitos somados dobram o custo de quadro. ### Passo 3: Aplique sticky em uma seção por página Ative o efeito Sticky em Motion Effects para fixar uma seção enquanto o visitante rola o restante. Use sticky em um menu lateral, em uma imagem de produto ou num formulário, e limite a um por página. Defina o Offset e o trecho de liberação com cuidado, porque sticky mal configurado sobrepõe conteúdo e empurra o layout, gerando o tipo de deslocamento que o CLS penaliza. ### Passo 4: Desative os efeitos no mobile e meça os quadros Publique a página e abra o controle de responsividade de cada efeito para desativá-lo em telas abaixo de 768px, onde parallax e sticky consomem mais bateria e travam a rolagem. Depois rode o PageSpeed Insights e o painel Performance do Chrome DevTools, role a página e observe o gráfico de quadros. Barras vermelhas de "frames dropped" indicam efeitos demais; reduza até voltar à faixa verde de 60 fps. Rode o [lazy loading](https://full.services/glossario/lazy-loading/) de imagens junto para aliviar o carregamento inicial. ## Quando um addon de scroll effect realmente compensa Um addon de efeitos de scroll avancados só compensa quando o nativo do Elementor PRO não cobre o caso, o que ocorre numa minoria de projetos mais ambiciosos. JetTricks, do Crocoblock, entrega scroll horizontal, efeitos de tilt e sticky mais granular; Happy Addons e Premium Addons adicionam revelações em sequência e timelines. Esses efeitos não existem nativos no PRO. O custo real de um addon para efeitos de scroll avancados não é a licença, é o peso de carregamento. Cada plugin injeta o próprio JavaScript e CSS, e empilhar quatro deles pode somar centenas de KB à página, piorando o tempo de interação. A gente vê no suporte da FULL que sites com três ou mais addons de Elementor sofrem mais com INP alto do que com o efeito visual em si. Antes de instalar, prefira [CSS personalizado no Elementor](https://full.services/como-adicionar-css-personalizado-no-elementor-5-metodos-infaliveis/) leve quando o ganho for pequeno. Para revisar a base de movimento, o guia de [animações profissionais no Elementor](https://full.services/animacoes-profissionais-no-elementor/) e o de [como criar animações atraentes](https://full.services/como-criar-animacoes-atraentes-no-elementor-um-guia-completo/) cobrem entrada e hover, que combinam bem com scroll. ## CSS scroll-driven animations: O futuro nativo do navegador As scroll-driven animations em CSS puro são a alternativa mais leve aos efeitos de scroll avancados via plugin, porque rodam fora da thread principal do JavaScript. A propriedade `animation-timeline: scroll()` atrela uma animação à rolagem sem nenhum script, e o suporte chegou ao Chrome 115 e ao Edge em meados de 2023, ainda parcial no Firefox e no Safari. Isso muda quem precisa de addon. Para o Elementor, isso significa que efeitos simples de revelação ou progresso podem ser escritos em poucas linhas de CSS pela aba Avançado, sem o peso de um addon inteiro. A gente vê no suporte da FULL que essa abordagem reduz o número de plugins ativos, costumeiramente a maior fonte de lentidão num site Elementor. A limitação é a compatibilidade: navegadores sem suporte ignoram o efeito, então ele precisa ser um aprimoramento progressivo, nunca a base da página. Para garantir performance, combine a técnica com as [dicas para otimizar o site Elementor](https://full.services/6-dicas-para-otimizar-seu-site-elementor/) e acompanhe o [LCP](https://full.services/glossario/lcp/) antes e depois de adicionar movimento. ## Acesse o Elementor PRO e os addons de scroll no plano da FULL Licenciar Elementor PRO, Crocoblock e Happy Addons separadamente sai caro quando você cuida de vários sites: cada licença anual soma, e uma agência com dez projetos paga dez vezes pelo mesmo conjunto de plugins de efeito. No plano PRO da FULL, por R$849, você libera o Elementor PRO e o pacote de addons premium para todos os seus sites de uma vez. Distribuído entre dez instalações, esse valor dilui para cerca de R$85 por site, com atualização e suporte inclusos. A gente vê no suporte da FULL que esse é o ponto em que a conta de quem produz efeitos de scroll avancados vira: parar de pagar licença avulsa de cada addon de movimento e centralizar tudo num bundle, em vez de renovar quatro ou cinco assinaturas isoladas a cada ano. Compare com o que você gasta hoje em licenças soltas nos [planos da FULL](https://full.services/planos). ## Perguntas frequentes sobre efeitos de scroll avancados
É possível criar efeitos de scroll avancados sem instalar nenhum addon no Elementor?

Sim. O Elementor PRO já entrega Efeitos de Rolagem nativos em Motion Effects, com parallax, transparência, desfoque, rotação, escala e sticky, o que cobre a maioria dos casos. Você só precisa de addon como JetTricks ou Happy Addons para scroll horizontal, tilt ou timelines em sequência. Para parallax e sticky simples, o nativo basta e nasce otimizado em `transform` e `opacity`, sem JavaScript extra.

Por que os efeitos de scroll deixam o site travando no celular?

Porque os efeitos competem pelos cerca de 10 ms úteis que o navegador tem por quadro a 60 fps, e o mobile tem menos folga de processamento. Empilhar parallax e sticky em várias seções derruba quadros e gera rolagem trêmula. A correção é desativar os Efeitos de Rolagem em telas abaixo de 768px pelo controle de responsividade do próprio Elementor e limitar o parallax a uma ou duas seções por página.

Qual a diferença entre parallax e sticky nos efeitos de scroll do Elementor?

O parallax desloca o elemento em velocidade diferente do resto da página conforme a rolagem, criando profundidade, e anima `transform`. O sticky fixa a seção na viewport por um trecho definido e a libera depois, recalculando a posição a cada quadro. Parallax impressiona pela sensação de camadas; sticky serve para manter menus, formulários ou imagens de produto visíveis. Ambos vivem em Motion Effects e pesam mais em mobile.

Quanto custa liberar o Elementor PRO e os addons de scroll no bundle da FULL?

No plano PRO da FULL, por R$849, você libera o Elementor PRO e o pacote de addons premium para todos os seus sites. Distribuído entre dez instalações, o valor dilui para cerca de R$85 por site, com atualização e suporte inclusos. O ganho aparece para quem cuida de vários projetos: em vez de renovar a licença avulsa de cada addon de efeito a cada ano, você centraliza tudo num bundle só.

O que os efeitos de scroll avancados fazem com os Core Web Vitals?

Quando bem configurados, quase nada; quando empilhados, prejudicam o INP e o CLS. Efeitos que animam `transform` e `opacity` rodam no compositor e não disparam recálculo de layout. Já sticky mal ajustado empurra o conteúdo e piora o CLS, e parallax demais derruba quadros e estoura o INP de 200 ms. A regra é medir no PageSpeed Insights antes e depois de cada efeito e desativar o que afundar a métrica.

## Próximos passos para páginas com scroll fluido Aplicar efeitos de scroll avancados no Elementor depende mais de disciplina técnica que de quantidade de efeitos: anime só `transform` e `opacity`, mantenha o parallax em amplitude baixa, use sticky uma vez por página e desative tudo no mobile. Comece pelos Efeitos de Rolagem nativos do Elementor PRO, que cobrem a maioria dos casos, e só recorra a um addon quando o efeito desejado realmente não existir no builder. Meça o resultado no PageSpeed Insights, observe o gráfico de quadros no DevTools e priorize a fluidez sobre o espetáculo. Para aprofundar, o [FULL Academy](https://full.services/academy/) reúne tutoriais e guias de Elementor em um só lugar, e a categoria [todos os artigos de Elementor da FULL](https://full.services/elementor/) traz os próximos materiais para evoluir suas páginas. --- ## Metadados Estruturados (Schema.org) ```json-ld { "@context": "https://schema.org", "@graph": [ { "@type": "TechArticle", "@id": "https://full.services/efeitos-de-scroll-avancados/#article", "headline": "Efeitos de scroll avancados no Elementor em 5 passos", "description": "Efeitos de scroll avancados são movimentos que o navegador dispara conforme o visitante rola a página, ligados à posição da barra de rolagem em vez de a um clique.", "url": "https://full.services/efeitos-de-scroll-avancados/", "datePublished": "2026-06-27T09:00:00-03:00", "dateModified": "2026-06-27T09:00:00-03:00", "inLanguage": "pt-BR", "articleSection": "Elementor", "keywords": [ "efeitos de scroll avancados", "Elementor", "WordPress Page Builders", "Web Design" ], "author": { "@id": "https://full.services/#person-clayton" }, "publisher": { "@id": "https://full.services/#org" }, "about": [ { "@type": "Thing", "name": "Elementor", "@id": "https://www.wikidata.org/wiki/Q96322879", "sameAs": "https://www.wikidata.org/wiki/Q96322879" }, { "@type": "Thing", "name": "WordPress Page Builders" }, { "@type": "Thing", "name": "Web Design" } ], "mentions": [ { "@type": "Organization", "name": "Elementor", "url": "https://elementor.com/", "@id": "https://www.wikidata.org/wiki/Q96322879", "sameAs": "https://www.wikidata.org/wiki/Q96322879" }, { "@type": "Organization", "name": "WordPress", "url": "https://wordpress.org/", "@id": "https://www.wikidata.org/wiki/Q13166", "sameAs": "https://www.wikidata.org/wiki/Q13166" } ], "mainEntityOfPage": { "@type": "WebPage", "@id": "https://full.services/efeitos-de-scroll-avancados/" }, "wordCount": 2448, "citation": [ { "@type": "CreativeWork", "name": "web.dev", "url": "https://web.dev/articles/vitals", "publisher": { "@type": "Organization", "name": "web.dev" } } ] }, { "@type": "FAQPage", "@id": "https://full.services/efeitos-de-scroll-avancados/#faq", "isPartOf": { "@id": "https://full.services/efeitos-de-scroll-avancados/#article" }, "mainEntity": [ { "@type": "Question", "@id": "https://full.services/efeitos-de-scroll-avancados/#faq-q1", "name": "É possível criar efeitos de scroll avancados sem instalar nenhum addon no Elementor?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "Sim. O Elementor PRO já entrega Efeitos de Rolagem nativos em Motion Effects, com parallax, transparência, desfoque, rotação, escala e sticky, o que cobre a maioria dos casos. Você só precisa de addon como JetTricks ou Happy Addons para scroll horizontal, tilt ou timelines em sequência. Para parallax e sticky simples, o nativo basta e nasce otimizado em `transform` e `opacity`, sem JavaScript extra.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/efeitos-de-scroll-avancados/#faq-q2", "name": "Por que os efeitos de scroll deixam o site travando no celular?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "Porque os efeitos competem pelos cerca de 10 ms úteis que o navegador tem por quadro a 60 fps, e o mobile tem menos folga de processamento. Empilhar parallax e sticky em várias seções derruba quadros e gera rolagem trêmula. A correção é desativar os Efeitos de Rolagem em telas abaixo de 768px pelo controle de responsividade do próprio Elementor e limitar o parallax a uma ou duas seções por página.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/efeitos-de-scroll-avancados/#faq-q3", "name": "Qual a diferença entre parallax e sticky nos efeitos de scroll do Elementor?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "O parallax desloca o elemento em velocidade diferente do resto da página conforme a rolagem, criando profundidade, e anima `transform`. O sticky fixa a seção na viewport por um trecho definido e a libera depois, recalculando a posição a cada quadro. Parallax impressiona pela sensação de camadas; sticky serve para manter menus, formulários ou imagens de produto visíveis. Ambos vivem em Motion Effects e pesam mais em mobile.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/efeitos-de-scroll-avancados/#faq-q4", "name": "Quanto custa liberar o Elementor PRO e os addons de scroll no bundle da FULL?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "No plano PRO da FULL, por R$849, você libera o Elementor PRO e o pacote de addons premium para todos os seus sites. Distribuído entre dez instalações, o valor dilui para cerca de R$85 por site, com atualização e suporte inclusos. O ganho aparece para quem cuida de vários projetos: em vez de renovar a licença avulsa de cada addon de efeito a cada ano, você centraliza tudo num bundle só.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/efeitos-de-scroll-avancados/#faq-q5", "name": "O que os efeitos de scroll avancados fazem com os Core Web Vitals?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "Quando bem configurados, quase nada; quando empilhados, prejudicam o INP e o CLS. Efeitos que animam `transform` e `opacity` rodam no compositor e não disparam recálculo de layout. Já sticky mal ajustado empurra o conteúdo e piora o CLS, e parallax demais derruba quadros e estoura o INP de 200 ms. A regra é medir no PageSpeed Insights antes e depois de cada efeito e desativar o que afundar a métrica.", "author": { "@id": "https://full.services/#org" } } } ] }, { "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://full.services/" }, { "@type": "ListItem", "position": 2, "name": "Elementor", "item": "https://full.services/elementor/" }, { "@type": "ListItem", "position": 3, "name": "Efeitos de scroll avancados no Elementor em 5 passos", "item": "https://full.services/efeitos-de-scroll-avancados/" } ] }, { "@type": "Organization", "@id": "https://full.services/#org", "name": "FULL Services", "url": "https://full.services", "logo": { "@type": "ImageObject", "url": "https://full.services/wp-content/uploads/full-services-logo.png", "width": 200, "height": 60 }, "sameAs": [ "https://www.instagram.com/fullservicesbr", "https://www.facebook.com/fullservices.br", "https://www.linkedin.com/company/fullservicesbr/" ], "knowsAbout": [ "WordPress", "WordPress Hosting", "Web Development", "Performance Optimization", "WordPress Security", "SEO para WordPress" ], "award": [ "Gold Medal - The WP Weekly Awards 2023 (https://thewpweekly.com/awards-2023/)", "Gold Medal - The WP Weekly Awards 2024 (https://thewpweekly.com/awards-2024/)" ], "hasCredential": { "@type": "EducationalOccupationalCredential", "credentialCategory": "certification", "name": "CVE Numbering Authority (CNA)", "description": "Autoridade de numeração de vulnerabilidades (CVE) para o ecossistema WordPress, autorizada a atribuir IDs CVE. Certificação válida desde 2022-05-03, com abrangência global.", "url": "https://www.cve.org/PartnerInformation/ListofPartners/partner/FULL", "recognizedBy": { "@type": "Organization", "name": "CISA — Cybersecurity and Infrastructure Security Agency", "url": "https://www.cisa.gov/", "sameAs": "https://www.cisa.gov/" } } }, { "@type": "Person", "@id": "https://full.services/#person-clayton", "name": "Clayton Margiotti", "givenName": "Clayton", "familyName": "Margiotti", "jobTitle": "Fundador e CEO da FULL Services", "description": "Fundador e CEO da FULL Services, plataforma WordPress SaaS com 50 mil clientes e 150 mil sites conectados, e anchor do ecossistema Elevor Global. Em 2024 conduziu a FULL a se tornar a primeira e unica empresa brasileira aprovada como CVE Numbering Authority sob a CISA (DHS/EUA). Mais de 20 anos construindo empresas digitais, com 13+ reconhecimentos internacionais (Facebook, GPTW, ONU, RD Summit).", "url": "https://full.services/sobre-nos/", "image": "https://full.services/wp-content/uploads/2026/05/clayton-margiotti.jpg", "sameAs": [ "https://www.linkedin.com/in/cmargiotti/" ], "knowsAbout": [ "Artificial Intelligence", "Cybersecurity", "CVE Program", "WordPress Enterprise", "SaaS Platforms", "Digital Infrastructure", "Technology Entrepreneurship", "Company Building", "Business Leadership", "Digital Growth" ], "hasOccupation": { "@type": "Occupation", "name": "Fundador e CEO", "occupationalCategory": "11-1011.00" }, "knowsLanguage": [ { "@type": "Language", "name": "Portuguese", "alternateName": "pt-BR" }, { "@type": "Language", "name": "English", "alternateName": "en" } ], "memberOf": { "@type": "Organization", "name": "CVE Numbering Authorities", "url": "https://www.cve.org/", "sameAs": "https://www.cve.org/" }, "alumniOf": [ { "@type": "EducationalOrganization", "name": "Global Scaling Academy (Blitzscaling Program)", "url": "https://www.blitzscalingacademy.com" }, { "@type": "EducationalOrganization", "name": "Esade", "url": "https://www.esade.edu" }, { "@type": "EducationalOrganization", "name": "Business School Sao Paulo (BSP)", "url": "https://bsp.edu.br/" }, { "@type": "EducationalOrganization", "name": "Tera", "url": "https://somostera.com" }, { "@type": "EducationalOrganization", "name": "Le Wagon", "url": "https://www.lewagon.com" }, { "@type": "EducationalOrganization", "name": "FIAP", "url": "https://www.fiap.com.br" }, { "@type": "EducationalOrganization", "name": "PUCRS", "url": "https://online.pucrs.br/" } ], "award": [ "Digital Disruptor – Engaging Experiences Master (Globant, 2021)", "Maior ROI do e-commerce brasileiro – Letrissimas (Facebook, 2019)", "1º lugar – Melhores Empresas para Trabalhar no Brasil – Eleva Digital (Great Place to Work, 2018)", "Case global de educacao no Facebook – Metodo SUPERA (Facebook, 2017)", "Maquina de Geracao de Leads, Agencia do Ano (RD Summit / RD Station, 2015)", "Monthly Recurring Revenue, top performance (RD Summit / RD Station, 2015)", "Quality/Efficiency – Entrepreneurship Training (UNCTAD / PNUD-ONU, 2010)" ], "subjectOf": [ { "@type": "NewsArticle", "url": "https://www.globant.com/news/globant-reveals-inaugural-digital-disruptors-award-winners", "publisher": { "@type": "Organization", "name": "Globant" } }, { "@type": "NewsArticle", "url": "https://www.prnewswire.com/news-releases/letrissimas-com-e-destaque-do-e-commerce-brasileiro-com-maior-roi-de-2018-877517801.html", "publisher": { "@type": "Organization", "name": "PR Newswire" } }, { "@type": "NewsArticle", "url": "https://www.segs.com.br/seguros/102599-gestao-de-pessoas-garante-mais-lucro-as-empresas", "publisher": { "@type": "Organization", "name": "Segs" } }, { "@type": "NewsArticle", "url": "https://franquiaeducacional.com/negocios-inovadores-facebook-elege-supera-case-mundial-de-educacao", "publisher": { "@type": "Organization", "name": "Franquia Educacional" } }, { "@type": "NewsArticle", "url": "https://acontecendoaqui.com.br/marketing/resultados-digitais-divulga-vencedores-do-premio-agencias-de-resultados-2015-durante-o-rd", "publisher": { "@type": "Organization", "name": "Acontecendo Aqui" } } ], "worksFor": { "@type": "Organization", "@id": "https://full.services/#org" } }, { "@type": "HowTo", "@id": "https://full.services/efeitos-de-scroll-avancados/#howto", "isPartOf": { "@id": "https://full.services/efeitos-de-scroll-avancados/#article" }, "name": "Passo a passo: efeitos de scroll avancados", "description": "Guia passo a passo sobre efeitos de scroll avancados para WordPress.", "url": "https://full.services/efeitos-de-scroll-avancados/", "totalTime": "PT24M", "author": { "@type": "Organization", "@id": "https://full.services/#org" }, "step": [ { "@type": "HowToStep", "position": 1, "name": "Passo 1: Ative os efeitos de rolagem na aba avançado", "text": "A base dos efeitos de scroll avancados é o painel Motion Effects. Selecione a seção, abra a aba Avançado e clique em Motion Effects. Ative "Efeitos de Rolagem" e escolha o primeiro tipo, de preferência Transparência, que anima só `opacity`. Defina a Velocidade num valor baixo e ajuste a Viewport para que o efeito comece e termine dentro da área visível, evitando saltos bruscos quando a seção entra na tela." }, { "@type": "HowToStep", "position": 2, "name": "Passo 2: Configure o parallax com amplitude baixa", "text": "No mesmo painel, ative Deslocamento Vertical para criar o parallax. Mantenha a amplitude entre 2 e 4 e defina a direção conforme o layout. Aplique o efeito ao fundo da seção ou a uma imagem, não ao bloco de texto, porque mover texto durante a leitura prejudica a experiência. Combine parallax com transparência na mesma seção com parcimônia, já que dois efeitos somados dobram o custo de quadro." }, { "@type": "HowToStep", "position": 3, "name": "Passo 3: Aplique sticky em uma seção por página", "text": "Ative o efeito Sticky em Motion Effects para fixar uma seção enquanto o visitante rola o restante. Use sticky em um menu lateral, em uma imagem de produto ou num formulário, e limite a um por página. Defina o Offset e o trecho de liberação com cuidado, porque sticky mal configurado sobrepõe conteúdo e empurra o layout, gerando o tipo de deslocamento que o CLS penaliza." }, { "@type": "HowToStep", "position": 4, "name": "Passo 4: Desative os efeitos no mobile e meça os quadros", "text": "Publique a página e abra o controle de responsividade de cada efeito para desativá-lo em telas abaixo de 768px, onde parallax e sticky consomem mais bateria e travam a rolagem. Depois rode o PageSpeed Insights e o painel Performance do Chrome DevTools, role a página e observe o gráfico de quadros. Barras vermelhas de "frames dropped" indicam efeitos demais; reduza até voltar à faixa verde de 60 fps. Rode o lazy loading de imagens junto para aliviar o carregamento inicial. Um addon de efeitos de scroll avancados só compensa quando o nativo do Elementor PRO não cobre o caso, o que ocorre numa minoria de projetos mais ambiciosos. JetTricks, do Crocoblock, entrega scroll horizontal, efeitos de tilt e sticky mais granular; Happy Addons e Premium Addons adicionam revelações em sequência e timelines. Esses efeitos não existem nativos no PRO. O custo real de um addon para efeitos de scroll avancados não é a licença, é o peso de carregamento. Cada plugin injeta o próprio JavaScript e CSS, e empilhar quatro deles pode somar centenas de KB à página, piorando o tempo de interação. A gente vê no suporte da FULL que sites com três ou" } ] } ] } ```