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.
Segurança: Atualizações frequentes geralmente incluem patches de segurança para corrigir vulnerabilidades identificadas. Ao manter o Magento atualizado, você reduz significativamente…
Como adicionar uma mensagem de Alerta ou Aviso do Admin do Magento 2 Injete o Magento\Framework\Message\ManagerInterface no construtor da sua…
Para exibir as mensagens adicionadas na classe Magento\Framework\Message\ManagerInterface em um arquivo .phtml, você pode usar o seguinte código: <?php $objectManager…
Para criar um script no Magento 2 que exporte as categorias para um arquivo XML com o nome da categoria,…
Para definir um vídeo MP4 como plano de fundo em um <div> usando HTML e CSS, você pode seguir estas…
Como desativar o "lastname" no Magento 2 e Adobe Commerce Desativando a obrigatoriedade do campo Execute a SQL abaixo diretamente…
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.