Componente · Prender na tela
O Pin trava a seção no lugar — ela para de se mover junto com a rolagem por um tempo — enquanto algo dentro dela muda: anda de um lado a outro, cresce, gira. Assim que esse "tempo emprestado" de rolagem acaba, a página volta a rolar normalmente e a seção se solta.
É como segurar uma folha de revista parada na sua frente enquanto você vira as páginas ao redor dela com a outra mão. A folha (a seção) não sai do lugar; o que muda é o que está desenhado nela. Role bem devagar pela caixa cinza abaixo — o quadrado azul vai atravessar a tela conforme você rola, e a caixa continuará grudada até o percurso terminar.
Nesta documentação a caixa precisa de espaço vertical real para o efeito acontecer — por isso esta seção é mais alta que a tela. No seu site é exatamente assim também: o Pin sempre "pede emprestado" uma distância de rolagem, definida por data-sw-end.
A seção presa recebe data-sw="pin". Qualquer elemento dentro dela marcado com data-sw="move" se movimenta durante o tempo em que a seção está presa.
<section data-sw="pin" data-sw-end="240%" data-sw-scrub=".6">
<div data-sw="move" data-sw-x="80vw" data-sw-rot="180">
Objeto que se move
</div>
</section>Na seção presa (data-sw="pin"):
data-sw-endQuanto de rolagem a seção "pede emprestado" antes de se soltar. Em porcentagem da altura da tela.Padrão: 300% · exemplo: data-sw-end="240%"data-sw-scrubLiga o movimento diretamente à posição da rolagem (avança e volta junto com o dedo ou o mouse) em vez de tocar sozinho.Um número (suavização) ou vazio para ligação diretaEm cada elemento que se move dentro dela (data-sw="move"):
data-sw-x / data-sw-yPara onde o elemento anda, na horizontal e na vertical.Exemplo: data-sw-x="80vw"data-sw-scaleO quanto o elemento cresce (acima de 1) ou encolhe (abaixo de 1).Exemplo: data-sw-scale="1.6"data-sw-rotQuantos graus o elemento gira durante o percurso.Exemplo: data-sw-rot="180"data-sw-opacityPara qual transparência o elemento vai (0 é invisível, 1 é totalmente visível).Exemplo: data-sw-opacity=".3"Com movimento reduzido ativado, a seção simplesmente não prende a tela — ela se comporta como qualquer seção normal, e o conteúdo interno já aparece no estado final.