Text animation coming from behind an image

Question

Text animation coming from behind an image

Asked 5 years, 6 months ago

Viewed 35 times

2

Hello, I made an animation of a text coming out from behind an image, but I can only use the Transform: Scale() and this is not what I really want, what I wish is that the text appears gradually and not go "stretching"

#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>

In this animation the text comes out "debuting" instead of appearing gradually along with the brown background. When I try to use width to contain the text behind the image, it appears out of it, underneath. And when I try to put the height it comes out strange too, anyway, I feel bad about it

1 answer

Browser other questions tagged image animation

You are not signed in. Login or sign up in order to post.

by hugocsl • **65,517** points · Answer 1 · 2019-05-05T23:07:12+00:00

Face to do with width yes, and with opacity together, because I understood that you want to have a "softness" in the way the element appears.

But what you have to take into consideration is that this was not a good way to do this animation, I needed to use overflow:hidden for the text to appear correctly merged with the container and nowrap in the text so it does not break line, even though it is larger than the container.

Another problem is that the text is centered, so according to the container grows the text will move to be centered, think you do not want it... Qq way follows the example

#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>

My tip is you redo the animation using pseudo-elements and delays, the way you did I don’t think it will make much better...