3
respostas

[Bug] Animação da Praia não funciona.

Boa noite, segui cada passo que a professora fez, mas quando testar animação da praia não aparece. ainda que lett-header também some. Na tela só os caiaques e nuvens flutuando. Para voltar lett-header teve que linkar novamente o arquivo style.css no html. faz 2 dias que estou tentando resolver e sem sucesso. Alguém pode me ajudar?

3 respostas

Opa Nathan, tudo bem?

Sinto muito em saber que está tendo problemas para prosseguir nessa parte, não se preocupe, podemos analisar esse problema passo a passo para achar uma solução. Para isso, poderia por gentileza em enviar o seu projeto completo? Dessa forma posso analisar o seu código na totalidade e simular o problema para ajudá-lo de forma mais assertiva.

Você pode compartilhar o link do seu projeto via Github.

Fico à disposição.

Tenha um bom dia e bons estudos.

Boa noite

segue o link https://github.com/nathanwhm/bugsvg

Opa Nathan.

Primeiramente gostaria de pedir desculpas pela falta de abordagem de uma parte do código referente ao movimento da praia na aula ("2.5s ease-in-out forwards 1;" ). Reconheço que isso pode ter causado confusão e inconveniência. Agradeço desde já pela sua compreensão e encaminharei o problema para a equipe responsável.

Analisando seu código pude perceber alguns empecilhos para conseguirmos chegar ao resultado esperado dentro do arquivo praia-caiaques.svg:

  • Na nossa tag svg, precisamos adicionar o id “praia” para indicar a animação da imagem:
<svg id="praia”
  • Além disso, é necessário adicionar as seguintes linhas de código referentes a animação dos objetos indo de cima para baixo:
#praia {
    animation: inicia-pagina 2.5s ease-in-out forwards 1;
}

@keyframes inicia-pagina {
    from {
        transform: translate(0, -2000px) 
    }
}

Fico à disposição.

Tenha um bom dia e bons estudos.

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓