Possible with javascript / jquery

Asked

Viewed 407 times

-1

inserir a descrição da imagem aqui

I need to get the result of the image. if you can help me, I’ll be very grateful.

javascript css

  • Friend, see this example and tell me if it helps you. It’s only with CSS

  • Duplicate of https://answall.com/questions/2960/barra-informa%C3%A7%C3%B5es-estilo-tv-similar-a-tag-Marquee/ and of https://answall.com/questions/11862/comort-fazer-um-marquee-sema-tag-marquee

1 answer

4

One way to do this sign is to use the CSS property 'Animation' and the rule '@keyframes', which controls the intermediate stages in an animation sequence, together with the function 'translateX()` which repositions an element horizontally.

.letreiro {
  width: 200px;
  height: 50px;
  border-style: solid;
  border-color: red;
  overflow: hidden;
  position: relative;
}

.letreiro p {
  position: absolute;
  font-size: 2.3em;
  width: 380px;
  margin: 0;
  transform: translateX(100%);
  animation: rolagem 5s linear infinite;
}

@keyframes rolagem {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
<div class="letreiro">
  <p>G1 - O Portal de notícias.</p>
</div>

  • Thank you, but I need that when I get to the last letter the animation ends. will have as.

  • @Caiojfmg, on the property animation delete the attribute infinite that the animation will run only once.

  • Augusto, I’m referring to the following: in your animation, at the end of it is a blank space. I need the animation to continue, but when I get to the last letter, that letter would have to stay in line with the right line of the div. could not appear that white space. understands. thus : news | and not white space |

  • You want the animation to end when the end point appears on the screen?

  • @Caiojfmg: On the dial .letreiro p seven the property transform for translateX(-50%); and in the rule rolagem in the attribute 100% do transform: translateX(-50%);.

  • It worked Augusto. once again I thank the good will. have a good day. ;)

  • If this answer solved your problem and there is no doubt left, mark it as correct/accepted by clicking on the " " that is next to it, which also marks your question as solved. If you still have any questions or would like further clarification, feel free to comment.

Show 2 more comments

Browser other questions tagged javascript css

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