Preciso fazer uma barra de informações estilo dos canais de TV que fica passando da direita para esquerda. Tenho o texto que vem do banco de dados e como é um texto longo precisaria que fosse passando em loop. Usarei em uma página da web.
Como vc não botou mais detalhes na pergunta segue um modelo simples que pode te servir. Basicamente vc precisa criar um "container" com overflow:hidden
e fazer a animação com @keyframes
.txt {
width: 10em;
height: 1.5em;
background-color: red;
color: #fff;
font-family: sans-serif;
font-size: 1rem;
line-height: 1.5em;
padding: 0.5em;
white-space: nowrap;
overflow: hidden;
}
.txt span {
padding-left: 100%;
display: inline-block;
animation: texto 10s linear infinite;
}
@keyframes texto {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-100%, 0);
}
}
<div class="txt"><span>URGENTE!!! - <strong>Bolso Mito vai te pegar</strong> se vc não colocar o código na pergunta!</span></div>
Tem o plugin jquery.marquee que usa css3 para fazer a animação, como o elemento marquee é obsoleto acho que esse é o melhor caminho. Encontrei no codepen um exemplo https://codepen.io/aamirafridi/pen/qgutw
$('.marquee').marquee({
//speed in milliseconds of the marquee
duration: 5000,
//gap in pixels between the tickers
gap: 50,
//time in milliseconds before the marquee will start animating
delayBeforeStart: 0,
//'left' or 'right'
direction: 'left',
//true or false - should the marquee be duplicated to show an effect of continues flow
duplicated: true
});
.marquee {
width: 300px;
overflow: hidden;
border: 1px solid #ccc;
background: #ccc;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js"></script>
<div class="marquee">jQuery marquee is the best marquee plugin in the world</div>
<marquee>
no seu código por exemplo... – Ricardo Pontual 20/04/18 às 18:13