Criar um fundo com animação de slide

[GabiSystem]

Aqui é uma requisição para criar um background para a pagina final com a intenção de possuir um slide que se movimente da direita para a esquerda com algumas imagens fornecidas pelo cliente, assim que criado, antes dessa requisição ser dada como encerada será necessário que passe pela aprovação do cliente.

[Syfer-boops]

Dica de css para ajudar

utilize @keyframes para criar animações especificas e use o transform: translate() para definir que a animação é de um lado pro outro, pode funcionar

[PolizeliDev]

@Syfer-boops Olá, boa noite, poderia nos explicar como poderia implementar esse keyframes com transform nos meus codigos?

[Syfer-boops]

Olá @PolizeliDev tudo bem? Claro que posso explicar, só me perdoe pela demora

Primeiro no css você vai precisar fazer uma classe para um conteiner de imagens, o que seria isso? é onde vão ficar agrupados todas as imagens que serão utilizadas na animação: .image-container { display: flex; width: max-content; }

isso vai agrupar todas as imagens e permitir que elas ocupem o máximo de largura necessária

Após isso você vai criar uma classe das imagens dentro do container da seguinte forma: .image-container img { width: 200px; height: auto; margin-right: 10px; }

edite isso como melhor lhe agradar, ou melhor agradar o grupo, ou o cliente de vocês

Agora você vai criar a animação utilizando o key frames em css dessa maneira: @keyframes move-left { 0% { transform: translateX(100%); /* Começa fora da tela à direita */ } 100% { transform: translateX(-100%); /* Termina fora da tela à esquerda */ } }

edite isso como melhor atender suas necessidades, uma dica: se você quiser que o fundo não disponibilize um vazio você pode burlar colocando pra iniciar em 0% e terminando na porcentagem que represente o fim da ultima imagem, para melhorar mais ainda isso você pode utilizar uma repetição da primeira imagem para parecer uma fluidez, brinque para sua diversão!!!!

feito a animação você vai a incluir na classe do container principal dessa forma: animation: move-left 10s linear infinite;

No html seus codigos vão ficar +/- semelhantes a isso: `

</div>`

lembrando que você pode livremente colocar a quantidade de imagens que preferir apenas se atentando a programar de forma correta o keyframes para atender sua necessidade!

espero que dê certo e depois me contem como ficou

[PolizeliDev]

ok muito obrigada ,sim contarei

[PolizeliDev]

E ai dev @Syfer-boops passando para agradecer pela dica, cara foi muito útil ,obrigadoooo.... Esta requisição esta sendo encerrada como concluída pois o que foi solicitado foi concluído no update bbc9771

[Syfer-boops]

Opa que bacana! Eu Baixei aqui o site, gostei bastante de como ficou