1

Boa tarde Pessoal, Recebi um pedido para criar um banner animado em HTML5. criei o banner utilizando o HTML e CSS, e funcionou corretamente. O cliente foi tentar implementar em seu site, que provavelmente é em wordpress, e não deu certo. Poderiam verificar o código e ver se o que eu fiz está correto, para eliminarmos a hipótese de erro no código? Desde já agradeço.

.box-banner{
    width: 300px;
    height: 250px;
    overflow: hidden;
    background: url("https://litens.com/wp-content/uploads/2018/09/fundo.png");
    position: relative;
    background-repeat: no-repeat;
  }

  @keyframes titulo-banner {
    0%   {left: -240px;}
    30%  {left: -240px;}
    40%  {left: -240px;}
    50%  {left: 15px;}
    90%  {left: 15px;}
    100% {left: 15px;}
  }

  .titulo-banner{
    width: 230px;
    padding: 5px;
    color: #fff;
    position: absolute;
    font-size: 30px;
    font-weight: bold;
    top: 18px;
    left: 15px;
    z-index: 1;
    line-height: 15px;

    animation: titulo-banner 3s ease-out 0s 1 normal;

    transition-timing-function: ease-in-out;
  }

  @keyframes logo-banner {
    0% {left: -170px;}
    30% {left: -170px;}
    40% {left: -170px;}
    50%{left: 20px;}
    90%{left: 20px;}
    100% {left: 20px;}
  }

  .logo-banner{
    position: absolute;
    bottom: 15px;
    left: 20px;
    animation: logo-banner 6s ease-out 0s 1 normal;
  }

  @keyframes fundo-logo-banner{
    0% {right: -300px;}
    30% {right: -300px;}
    40% {right: -300px;}
    50%{right: 0px;}
    90%{right: 0px;}
    100% {right: 0px;}
  }

  .fundo-logo-banner{
    position: absolute;
    bottom: 0px;
    right: 0;
    animation: fundo-logo-banner 5s ease-out 0s 1 normal;
  }

  @keyframes peca-banner{
    0% {right: -170px;}
    30% {right: -170px;}
    40% {right: -170px;}
    50%{right:  0px;}
    90%{right: 0px;}
    100% {right: 0px;}
  }

  .peca-banner{
    position: absolute;
    top: 43.5px;
    right: 0;
    animation: peca-banner 4s ease-out 0s 1 normal;
    z-index: 1;
  }
<div class="box-banner">
  <img src="https://images.tcdn.com.br/img/img_prod/444589/produto_teste_7080_1_20180221140614.png" class="titulo-banner"/>
  <img src="https://mancilha.files.wordpress.com/2008/09/teste2.png" class="fundo-logo-banner"/>
</div>

1 Resposta 1

1

Eu testei seu HTML na ferramente de validação de HTML da W3C e nenhum erro foi encontrado (a não ser imagens sem o atributo alt). Vc mesmo pode testar aqui e mostrar pro seu cliente: https://validator.w3.org/#validate_by_input

inserir a descrição da imagem aqui

Eu testei seu CSS na ferramente de validação de CSS da W3C e nenhum erro foi encontrado, passou com 100%. Vc mesmo pode testar aqui e mostrar pro seu cliente: https://jigsaw.w3.org/css-validator/#validate_by_input

inserir a descrição da imagem aqui

No console do Chrome Dev Tools também não apareceu erro algum.

Agora vamos ao que eu acho que pode ser o seu problema. vendor prefix

Certifique-se que seu CSS tem os prefixos para funcionar em todos os browser. Se o browser do seu cliente não der suporte a @keyframes por exemplo certamente o código vai dar problema lá

Aqui tem uma ferramente de "auto prefixar" o CSS. As vezes pode te ajudar: https://autoprefixer.github.io/

Aqui já tem seu CSS prefixado:

.box-banner{
    width: 300px;
    height: 250px;
    overflow: hidden;
    background: url("https://litens.com/wp-content/uploads/2018/09/fundo.png");
    position: relative;
    background-repeat: no-repeat;
  }

  @-webkit-keyframes titulo-banner {
    0%   {left: -240px;}
    30%  {left: -240px;}
    40%  {left: -240px;}
    50%  {left: 15px;}
    90%  {left: 15px;}
    100% {left: 15px;}
  }

  @keyframes titulo-banner {
    0%   {left: -240px;}
    30%  {left: -240px;}
    40%  {left: -240px;}
    50%  {left: 15px;}
    90%  {left: 15px;}
    100% {left: 15px;}
  }

  .titulo-banner{
    width: 230px;
    padding: 5px;
    color: #fff;
    position: absolute;
    font-size: 30px;
    font-weight: bold;
    top: 18px;
    left: 15px;
    z-index: 1;
    line-height: 15px;

    -webkit-animation: titulo-banner 3s ease-out 0s 1 normal;

            animation: titulo-banner 3s ease-out 0s 1 normal;

    -webkit-transition-timing-function: ease-in-out;

         -o-transition-timing-function: ease-in-out;

            transition-timing-function: ease-in-out;
  }

  @-webkit-keyframes logo-banner {
    0% {left: -170px;}
    30% {left: -170px;}
    40% {left: -170px;}
    50%{left: 20px;}
    90%{left: 20px;}
    100% {left: 20px;}
  }

  @keyframes logo-banner {
    0% {left: -170px;}
    30% {left: -170px;}
    40% {left: -170px;}
    50%{left: 20px;}
    90%{left: 20px;}
    100% {left: 20px;}
  }

  .logo-banner{
    position: absolute;
    bottom: 15px;
    left: 20px;
    -webkit-animation: logo-banner 6s ease-out 0s 1 normal;
            animation: logo-banner 6s ease-out 0s 1 normal;
  }

  @-webkit-keyframes fundo-logo-banner{
    0% {right: -300px;}
    30% {right: -300px;}
    40% {right: -300px;}
    50%{right: 0px;}
    90%{right: 0px;}
    100% {right: 0px;}
  }

  @keyframes fundo-logo-banner{
    0% {right: -300px;}
    30% {right: -300px;}
    40% {right: -300px;}
    50%{right: 0px;}
    90%{right: 0px;}
    100% {right: 0px;}
  }

  .fundo-logo-banner{
    position: absolute;
    bottom: 0px;
    right: 0;
    -webkit-animation: fundo-logo-banner 5s ease-out 0s 1 normal;
            animation: fundo-logo-banner 5s ease-out 0s 1 normal;
  }

  @-webkit-keyframes peca-banner{
    0% {right: -170px;}
    30% {right: -170px;}
    40% {right: -170px;}
    50%{right:  0px;}
    90%{right: 0px;}
    100% {right: 0px;}
  }

  @keyframes peca-banner{
    0% {right: -170px;}
    30% {right: -170px;}
    40% {right: -170px;}
    50%{right:  0px;}
    90%{right: 0px;}
    100% {right: 0px;}
  }

  .peca-banner{
    position: absolute;
    top: 43.5px;
    right: 0;
    -webkit-animation: peca-banner 4s ease-out 0s 1 normal;
            animation: peca-banner 4s ease-out 0s 1 normal;
    z-index: 1;
  }

E aqui tem um saite onde vc pode consultar o suporte dos browsers ao estilos de CSS como por exemplo o @keyframes: https://caniuse.com/#feat=css-animation

inserir a descrição da imagem aqui

Em último caso o problema não é com seu código, é na forma como o cliente está fazendo a implantação ao meu ver!

2
  • Agradeço o feedback e toda ajuda com os diversos meios em que testou meu código. Realmente, faltou a parte dos prefix. Fiz essa inclusão e mandei novamente para o cliente. Vamos ver o que ocorre. Se caso o erro persista, acredito também que o problema esteja na implementação. Mais uma vez, muito obrigado! Commented 6/09/2018 às 21:54
  • @WelkerZigante pois eh, da parte do seu código vc pode ficar tranquilo, inclusive com esses links vc pode provar pro cliente que o problema não eh com o seu trabalho! De qq forma boa sorte ai!
    – hugocsl
    Commented 6/09/2018 às 22:05

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .