SWCore / Animações / Window

Window Animações

Uma imagem "janela" circular (ou de qualquer formato) que acompanha a posição da tela conforme a seção passa.

O que é

Centraliza uma imagem filha verticalmente em relação à altura da tela enquanto a seção rola — efeito de "olho mágico" que segue o visitante em vez de rolar junto com o conteúdo.

Como funciona

Exige uma <img> filha direta. A cada scroll/resize, um ScrollTrigger recalcula a posição vertical da imagem pra mantê-la centralizada em relação à altura visível da tela — sem depender de position:sticky.

Exemplos

Janela circular acompanhando o scroll Ao vivo
Arquitetura 
<div data-sw="window">
  <img src="imagem.webp" alt="Descrição">
</div>

Atributos

data-sw="window"
no container; precisa de uma <img> como filho direto

Variantes

Nenhum.

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

  • Precisa do gsap-bundle.js (GSAP com ScrollTrigger já incluso). O JS e o CSS do Motion já vêm dentro de swcore.js/swcore.css, sem arquivo extra do SWCore.

Limitações — o que ele não faz

  • A imagem precisa ser filha direta do container — um <div> ou <picture> no meio quebra a detecção.
← AnteriorFixed Próximo →Story