Tutorial bem simples de como fazer o efeito parallax com CSS em uma imagem de background.
Para criar esse efeito no background iremos utilizar a propriedade background-attachment com o valor fixed.
Essa propriedade define se o background irar acompanhar o scroll (valor padrão) ou ficará fixo (fixed).
Exemplo de background fixed:
Código utilizado:
<div style="background-image: url('http://rogertakemiya.com.br/wp-content/uploads/2017/03/bg-texture-exemplo.png'); background-attachment: fixed; height: 200px; width: 100%;"></div> Agora para o efeito ficar mais legal, vamos utilizar a sobreposição de alguns elementos dentro da div.
Bem simples, não existe segredo.
Além da propriedade “attachment”, você pode utilizar no mesmo elemento:
Utilizando essas três propriedades você poderá utilizar uma foto como background e durante o scroll passara a impressão que ela está “andando”, simples efeito de parallax com CSS:
Explicando com mais calma..
O “position” define a posição da imagem utilizada no background, no exemplo é “center”, centralizando a nossa imagem.
Com o “Repeat” definimos se a imagem deverá se repetir para preencher todo o elemento, passamos “no-repeat”, sem repetição.
“Size” é o tamanho do background, para o efeito parallax passamos “cover”, para que o tamanho da imagem seja ajustada para preencher todo o elemento.
Para o efeito ficar bem “equilibrado” no seu site é interessante você intercalar Divs com e sem o efeito:
div com parallax
div normal, cor sólida
div com parallax
normal, cor sólida ou imagem
Dessa forma a impressão de “profundidade” do efeito será mantida.
Módulo gratuito Roger_CnpjAlfanumerico que aplica máscara e validação do novo CNPJ alfanumérico no checkout e formulários do Magento 2 e…
A partir de 06/07/2026 a Receita passa a emitir CNPJ alfanumérico. Conheça o plugin grátis que aplica máscara e validação…
Para remover um módulo do Magento 2, siga os passos abaixo: 1. Desabilitar o módulo Primeiro, desabilite o módulo usando…
Para cancelar 100% do pedido e criar um crédito para todos os itens através da API REST do Magento 2,…
No Magento 2, a quantidade "reservada" na "Salable Quantity" é gerenciada principalmente pelos módulos MSI (Multi-Source Inventory). A "Salable Quantity"…
Como corrigir o erro ao acessar o Admin do Magento 2. Mesmo após fazer o login, permanece na tela de…
Ver comentários
Depois de olhar muitos sites encontrei a explicação mais clara deste efeito! E agora me ajudou muito.
Obrigado
Espero que me responda. Antes de mais nada parabéns pelo trabalho. O que eu não entendo é como o scroll "revela" uma imagem debaixo da outra? Na primeira parte do teu exemplo o scroll percorreu a mesma imagem, dando a sensação de movimento. OK. Mas logo abaixo, continuando o scroll, aparece em background uma outra imagem que é "revelada" pelo scroll. Forçosamente parecendo estúpido, o background fixed não deveria impedir das imagens aparecerem? Só sendo visível a primeira imagem? Não entendo o que acontece. Valeu.
Olá João, boa tarde,
Você diz na terceira imagem?
O que pode ocorrer é que se a propriedade 'background-repeat: no-repeat;' for definida, no final da imagem será exibido o background que está abaixo da Div.