Como ele é
Pense em recortes de papel presos em alturas diferentes dentro de uma caixa: ao inclinar a caixa, os mais próximos andam mais que os do fundo. Aqui, cada elemento recebe uma profundidade e, quando o cursor ou o dedo se move pela tela, todos se deslocam no mesmo sentido do gesto, ou no oposto com sensibilidade negativa, em distâncias proporcionais a essa profundidade. O deslocamento acompanha o ponteiro com um atraso suave, quadro a quadro, sem trancos. Você posiciona cada camada com classes, e o conteúdo é livre. Na demo, oito fotos de tamanhos variados flutuam sobre um fundo preto ao redor de um título central.
Você pode estar procurando isto se pediu algo assim
- fotos espalhadas que se mexem quando passo o mouse
- efeito de profundidade no topo do site com imagens flutuando
- hero com elementos que andam em velocidades diferentes conforme o cursor
- aquele efeito parallax de mouse de site de agência
- colagem de fotos que reage ao movimento do dedo no celular
- deixar a página inicial com sensação 3D sem usar WebGL
Também chamado de
- parallax de mouse
- mouse parallax
- cursor parallax
- efeito de profundidade
- floating images
- parallax hero
- imagens flutuantes
Quando usar
- Hero de agência, estúdio ou portfólio com colagem de fotos
- Página de lançamento com ilustrações em camadas
- Seções de marcas de moda, gastronomia ou turismo que vivem de imagem
- Telas de boas-vindas em que o primeiro impacto importa
Quando evitar
- Páginas com formulários ou texto longo sobre as imagens, porque o movimento distrai
- Composições com muitas imagens pesadas, que atrasam o carregamento do topo da página
Como pedir para a sua IA
Crie um hero com parallax de mouse: fotos e ilustrações em camadas com profundidades diferentes que se deslocam suavemente conforme o cursor ou o dedo, com pausa quando a seção sai da tela, versão estática para movimento reduzido e imagens otimizadas.
Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Parallax Float
O Parallax Float funciona no celular?
Sim. O Parallax Float também escuta o movimento do dedo na tela, então as camadas se deslocam enquanto a pessoa arrasta ou rola a página tocando nela. Sem cursor, o efeito só aparece durante o toque e fica parado no resto do tempo. Defina tamanhos menores para as imagens em telas estreitas, como a demo faz.
O Parallax Float pesa na página?
É classificado como Leve no THM Componentes, porque só move as camadas com transformações, sem WebGL. O laço de animação do Parallax Float roda o tempo todo enquanto o componente está montado, mesmo fora da tela, então vale pedir à IA para pausar esse laço quando a seção sai da viewport. O maior custo costuma ser o peso das fotos.
Como controlar a intensidade do Parallax Float?
O Parallax Float tem duas alavancas no contêiner: sensitivity multiplica o deslocamento de todas as camadas, e valores negativos invertem o sentido; easingFactor, 0,05 por padrão, define a rapidez com que cada camada alcança o cursor. Em cada elemento, a prop depth diz quanto ele anda: mais profundidade, mais movimento.
