2

Olá, fiz uma animação de um texto saindo por trás de uma imagem, porém só consigo usar o transform: scale() e isso não é o que eu quero de verdade, o que eu desejo é que o texto vá aparecendo aos poucos e não ir "esticando"

#primeiraparte {
  width: 70%;
  position: relative;
  top: 140px;
  display: grid;
  grid-template-columns: 250px auto;
  grid-template-rows: 445px;
  grid-template-areas: "imagem texto";
  left: 15%;
}

#imagemaplicativo {
  grid-area: imagem;
  width: 250px;
  height: 500px;
  justify-self: start;
  z-index: 1;
  animation: animacaoimagem 6s;
  animation-fill-mode: backwards;
  animation-delay: 1s;
}

#textoprimeiraparte {
  justify-self: start;
  grid-area: texto;
  align-self: center;
  position: relative;
  padding: 80px 90px 80px 75px;
  border-radius: 0px 25px 25px 0px;
  background-color: #c6baa2;
  font-family: "Roadgeek";
  font-size: 24px;
  text-align: center;
  z-index: 0;
  animation: animacaotexto 9s;
  animation-fill-mode: backwards;
  animation-delay: 1s;
}

@-webkit-keyframes animacaoimagem {
  0% {
    transform: translateX(300px);
  }
  100% {}
}

@-webkit-keyframes animacaotexto {
  0% {
    transform: translateX(-70px) scaleX(0.2);
  }
  65% {
    transform: scaleX(1);
  }

  100% {
    transform: scaleX(1.013);
  }
}
<!DOCTYPE html>
<html>

<body>

  <div id="primeiraparte">
    <img src="../Fotos/app.png" id="imagemaplicativo" />
    <div id="textoprimeiraparte"> A Future integra o seu estabelecimento com novas tecnologias <br /> que garantem rapidez e segurança.</div>
  </div>

</body>

</html>

Nessa animação o texto sai "estrechando" em vez de ir aparecendo aos poucos junto com o fundo marrom. Quando eu tento usar o width para conter o texto por trás da imagem, ele aparece pra fora dela, por baixo. E quando tento colocar o height ele sai estranho também, enfim, eu to passando mal com isso

1 Resposta 1

2

Cara da para fazer com width sim, e com opacity junto, pois entendi que vc quer que tenha uma "suavidade" na forma como o elemento aparece.

Mas o que vc tem que levar em consideração é que esse não foi um bom caminho para fazer essa animação, eu precisei usar overflow:hidden para o texto ir aparecendo corretamente jundo com o container e nowrap no texto para ele não quebrar linha, mesmo sendo maior que o container.

inserir a descrição da imagem aqui

Outro problema é que o texto está centralizado, então conforme o container cresce o texto vai se movendo para ficar centralizado, acho que vc não quer isso... De qq forma segue o exemplo

#primeiraparte {
    width: 70%;
    position: relative;
    top: 140px;
    display: grid;
    grid-template-columns: 250px auto;
    grid-template-rows: 445px;
    grid-template-areas: "imagem texto";
    left: 15%;
}

#imagemaplicativo {
    grid-area: imagem;
    width: 250px;
    height: 500px;
    justify-self: start;
    z-index: 1;
    animation: animacaoimagem 6s;
    animation-fill-mode: backwards;
    animation-delay: 1s;
}

#textoprimeiraparte {
    justify-self: start;
    grid-area: texto;
    align-self: center;
    position: relative;
    padding: 80px 90px 80px 75px;
    border-radius: 0px 25px 25px 0px;
    background-color: #c6baa2;
    font-family: "Roadgeek";
    font-size: 24px;
    text-align: center;
    z-index: 0;
    animation: animacaotexto 9s;
    animation-fill-mode: forwards;
    animation-delay: 1.5s;
    opacity: 0;
    width: 0;
    white-space: nowrap;
    overflow: hidden;
}

@-webkit-keyframes animacaoimagem {
    0% {
        transform: translateX(300px);
    }

    100% {}
}

@-webkit-keyframes animacaotexto {
    0% {
        transform: translateX(-70px);
        opacity: 0;

    }

    65% {

        opacity: 1;

    }

    100% {
        width: 100%;
        opacity: 1;

    }
}
<div id="primeiraparte">
    <img src="https://placecage.com/100/100" id="imagemaplicativo" />
    <div id="textoprimeiraparte"> A Future integra o seu estabelecimento com novas tecnologias <br /> que garantem
        rapidez e segurança.</div>
</div>

A minha dica é vc refazer a animação usando pseudo-elementos e delays, da forma como fez acho que não vai dar para melhorar muito...

2
  • @o cage não podia falhar xD
    – Isac
    6/05/2019 às 12:02
  • @Isac eu tenho um Snippet no VS Code que quando eu digito "place" ele já incere uma tag de imagem com o Placecage.com :D, vou criar um novo para "murray" e variar um pouco com FillMurray.com ou "Steve" para stevensegallery.com rss
    – hugocsl
    6/05/2019 às 12:08

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 .