1
resposta

[Dúvida] Efeito Parallax no iPhone

Pessoal, estou tentando colocar uma imagem de fundo com efeito Parallax no meu site, mas acabei descobrindo que "background-attachment: fixed" não funciona para dispositivos iOS. A imagem fica estática e distorcida... Alguém sabe uma maneira alternativa de fazer esse efeito?

1 resposta

Olá, Ana.

Tudo bem?

Uma sugestão: Você pode usar JavaScript para criar o efeito Parallax de forma que funcione em todos os dispositivos, incluindo iOS. Aqui está um exemplo simples de como fazer isso:

1. Primeiro, adicione a biblioteca jQuery ao seu projeto (se ainda não estiver usando):

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

2. Em seguida, adicione o seguinte código JavaScript para criar o efeito Parallax:

<script>
$(window).scroll(function() {
    var scrollTop = $(window).scrollTop();
    $('.parallax').css('background-position', 'center ' + (scrollTop * 0.5) + 'px');
});
</script>

3. No seu CSS, defina a classe .parallax para a imagem de fundo:

.parallax {
    background-image: url('sua-imagem.jpg');
    background-size: cover;
    background-attachment: scroll; /* Isso evita o problema no iOS */
    height: 500px; /* Ajuste conforme necessário */
}

4. E finalmente, no seu HTML, aplique a classe .parallax ao elemento desejado:

<div class="parallax"></div>

Com isso, você deve conseguir um efeito Parallax que funcione tanto em dispositivos iOS quanto em outros dispositivos.

Lembre-se que é apenas uma sugestão, mas é bem utilizado, qualquer coisa tenta dar uma pesquisada sobre efeito paralax com JavaScript.

Espero ter ajudado e bons estudos!