Efeito parallax com GSAP ScrollTrigger

Efeito parallax GSAP: o que a “uma linha” esconde

Parallax = camadas se movendo em velocidades diferentes no scroll. Com GSAP + ScrollTrigger, o núcleo é um tween com scrub amarrado à rolagem; o resto (plugin, markup, reduced-motion) é scaffold obrigatório, não opcional.

Como Funciona o Efeito Parallax

O efeito paralaxe utiliza a diferença de velocidade no deslocamento dos elementos ao rolar a página, normalmente manipulando propriedades CSS como “transform: translateY” ou “background-position”. Assim, você faz camadas do site se moverem em velocidades diferentes e cria um efeito moderno, fluido e envolvente.

Pré-requisitos: O que Você Precisa

Você pode criar parallax tanto em projetos puros (HTML, CSS e JS) quanto em frameworks (React, Next, WordPress, Webflow, Framer). Tenha um editor de código (VS Code), navegador atualizado e ambiente local para rodar seu site, mesmo que seja um simples Go Live ou servidor.

Estruturando o Projeto

O mínimo necessário é: um container (div), uma imagem de fundo e um elemento de destaque – geralmente o título (h1, h2 etc). Não precisa de nada além disso para experimentar o efeito.

Montagem em HTML e CSS: Passo Rápido

Crie uma pasta de projeto, abra no VS Code, e monte seu index.html com uma div centralizadora (“div.py”) contendo: uma imagem de fundo e um h1 (título). No CSS, deixe a imagem como position absolute, width 100%, height 100%, e por baixo do título usando z-index -1. No container da imagem, use height 200vh para garantir rolagem de página. Centralize tudo com display flex e alinhe pelo justify-content e align-items.

Núcleo: gsap.to + ScrollTrigger scrub (quase uma linha)

A chave costuma ser GSAP + plugin ScrollTrigger (não é CSS nativo “de uma linha”). Importe via CDN e use algo como gsap.to(".parallax", { yPercent: -20, ease: "none", scrollTrigger: { trigger: ".hero", scrub: true } }). Ainda há markup, classes e testes em mobile.

O Que Cada Parâmetro Faz

- y: 500 : indica quanto seu título vai se mover na vertical. - trigger : identifica o elemento que ativa o efeito. - start/end : define o início e fim da animação baseado no scroll. - scrub : true faz o efeito acompanhar o movimento real do scroll, tornando tudo fluido.

Personalize: Fundo Rápido, Conteúdo Devagar

Inverter as velocidades do título e do plano de fundo oferece variações interessantes de paralaxe. Também é possível adicionar camadas intermediárias (elementos extra) para dar sensação de profundidade espacial ou diferentes direções de movimento (y, x, escala).

Quando CSS-only ou Rellax bastam — e quando o GSAP vence

Como Aplicar no WordPress, Webflow e Builders

Em plataformas no-code, basta identificar como inserir custom code (scripts) de forma segura e adicionar o trecho do GSAP + comandos no lugar indicado. Elementos devem ter as classes corretas, assim como no exemplo original.

Testando e Ajustando para Mobile

Após implementar, valide o efeito tanto em desktop quanto em dispositivos móveis e tablets. Ajustes em valores “y”, “scrub”, “start” e “end” podem ser necessários para não exagerar e garantir legibilidade.

Acessibilidade: prefers-reduced-motion e transform (não top)

prefers-reduced-motion: media query ou matchMedia — se o usuário pediu menos movimento, não rode parallax. Anime transform/opacity; top/left forçam layout e doem no mobile. Comprima imagens (LCP) — animação não deve atrasar o herói.

“Uma linha” na prática = gsap.to + ScrollTrigger scrub depois do HTML/CSS e registerPlugin — não CSS mágico sem lib quando o tutorial usa GSAP.

Expandindo seu Parallax: Efeitos Avançados

O mesmo conceito serve para animar múltiplos elementos ou criar fundos infinitos, cometas voando e simular cenas em camadas. Basta alterar seletores, propriedades animadas e escalonar o uso do ScrollTrigger.

Mostre seu Projeto ao Mundo

Compartilhe o efeito em uma comunidade de desenvolvedores, peça feedback e continue aprimorando. Esse é o tipo de detalhe que chama atenção (recrutadores, clientes, parcerias) e demonstra domínio da stack web. Não deixe de acompanhar tutoriais e lives semanais para ir além, tirando dúvidas ao vivo!

Resumo e Próximo Passo

Você aprendeu a criar um efeito visual moderno, útil e elegante com o mínimo de código. Use esse conhecimento para turbinar seu site, portfólio ou projetos freelance, e acompanhe novos conteúdos diariamente para aperfeiçoar seu repertório. E se tiver dúvidas ou sugestões, envie comentários – sua participação é vital para conteúdos cada vez mais relevantes!

Para Ir Além: Canal de Dev e Comunidade

Busque sempre mais. Entre na comunidade de aprendizado constante com vídeos todos os dias sobre programação, mercado e design. E fique ligado para lives semanais interativas às terças, 20h. Participe e evolua junto! Dúvidas? Compartilhe nos comentários para interação e troca real em tempo real.

React/Next: componente client e registerPlugin

App Router: parallax em Client Component. Registre ScrollTrigger uma vez. Prefira yPercent/transform (compositor) — não anime top/left.

'use client';
import { useLayoutEffect, useRef } from "react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

export function ParallaxLayer() {
  const ref = useRef<HTMLDivElement>(null);
  useLayoutEffect(() => {
    const ctx = gsap.context(() => {
      gsap.to(ref.current, {
        yPercent: 30,
        ease: "none",
        scrollTrigger: { trigger: ref.current, scrub: true },
      });
    }, ref);
    return () => ctx.revert();
  }, []);
  return <div ref={ref} className="parallax-bg" />;
}

Respeite prefers-reduced-motion (desligue scrub). Para GSAP geral e Intersection Observer, veja os artigos irmãos no blog — aqui o ângulo é parallax com ScrollTrigger/scrub.

Fontes

Revisão em agosto de 2026. Parallax do tutorial usa GSAP + ScrollTrigger (não “uma linha de CSS mágico”). Respeite `prefers-reduced-motion` e performance mobile. Licença GSAP comercial: confira no dia.

<a href="https://gsap.com/">GSAP</a>. <a href="https://gsap.com/docs/v3/Plugins/ScrollTrigger/">GSAP ScrollTrigger</a>. <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion">MDN — prefers-reduced-motion</a>.

Perguntas frequentes

Como criar efeito parallax com GSAP ScrollTrigger?

Registre o ScrollTrigger e anime com `gsap.to(el, { yPercent, ease: "none", scrollTrigger: { scrub: true, trigger, start, end } })`. Prefira `transform`/`yPercent` a animar `top`. Em Next, rode no client. O “quase uma linha” assume GSAP já carregado.

Dá para fazer parallax em uma linha sem biblioteca?

CSS scroll-driven ou transforms simples cobrem casos leves; parallax polido do tutorial usa GSAP + ScrollTrigger (CDN/npm). Prometer “uma linha mágica sem lib” desalinha o código real. Escolha CSS quando o efeito for mínimo.

Parallax com GSAP atrasa LCP ou pesa no mobile?

Pode, se animar layout, carregar GSAP no critical path ou rodar em muitos layers. Respeite `prefers-reduced-motion`, limite elementos e não bloqueie LCP. Meça no device real antes de parallax em toda a landing.

Quando CSS basta e quando preciso de GSAP?

CSS/IO bastam para fade/slide simples. GSAP brilha com scrub sincronizado, timelines e parallax multi-layer. Se a landing só precisa de um detalhe, não puxe a lib inteira “por moda”.

Continue explorando