Feature: Adicionar um cenário de fundo que se move lentamente (parallax) #15
Description
Olá! Para deixar nosso jogo visualmente mais interessante, queremos adicionar um efeito de profundidade ao cenário, conhecido como "parallax". A ideia é que a imagem de fundo se mova sutilmente em resposta ao movimento do mouse.
Sua Missão:
Implementar um efeito parallax na imagem de fundo do corpo da página (img/code.png).
Plano de Ação ✅
Siga as Regras: Garanta que você está seguindo as orientações do README.md e CONTRIBUTING.md.
Crie uma nova branch para esta tarefa (ex: feat-parallax-background).
No arquivo style.css:
Atualmente, a imagem de fundo está no pseudo-elemento body::before. Para manipular sua posição com JavaScript, precisamos movê-la para um elemento real. Remova as regras de background-image do body::before.
No arquivo index.html:
Logo após a tag , adicione um div que servirá como nosso fundo:
HTML
De volta ao style.css:Crie as regras para o novo div:
CSS
#background-parallax {
background-image: url("img/code.png");
background-repeat: no-repeat;
background-position: right;
content: "";
position: absolute;
width: 100%;
height: 100%;
opacity: 0.4;
z-index: -1; /* Para ficar atrás de tudo /
transition: transform 0.2s ease-out; / Opcional, para suavizar */
}
No arquivo app.js:
Adicione um EventListener para o movimento do mouse no document.
Dentro da função do evento, calcule o quanto o fundo deve se mover com base na posição do cursor (event.clientX, event.clientY). O movimento deve ser sutil.
Selecione o div#background-parallax e aplique o movimento usando a propriedade transform: translate(Xpx, Ypx);.
Abra um Pull Request mostrando o novo efeito visual.
Obrigado por deixar nosso jogo com um visual mais dinâmico e profissional!