Como deslocar o texto suavemente usando o HTML5

Question

Como deslocar o texto suavemente usando o HTML5

quero rolar uma única linha de texto o mais suave possível

O meu dispositivo alvo é uma resolução de 1920 x 120 sem entrada. (sem teclado ou rato). Tem uma CPU mal equipada.

<html>
<head>
    <title>News</title>
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script>
            $(function() {
                $.get('data.txt', function(data) {
                    $('#text-file-container').html(data);
                });
            });
        </script>
        <link rel="stylesheet" href="content.css">
</head>
<body>

    <div id="scroll">
            <h1>
                <marquee behavior="scroll" direction="left" scrollamount="15" id="text-file-container"></marquee>
            </h1>
    </div>

</body>
</html>

Tentei uma biblioteca JS que encontrei online, mas estava muito mal. Estou aberto a sugestões

2

javascript jquery html5

Author: software is fun, 2015-09-17

Source

1 answers

score 9 · Accepted Answer

Você poderia tentar usar as animações e transições de CSS em vez de uma biblioteca/plugin de JavaScript ou marquee (que, como mencionado nos comentários, é obsoleto e deve ser evitado {[[10]}).

Um exemplo de como isso poderia ser feito com CSS e animações:

* {
  margin:0;
  padding:0;
  border:0;
}

@keyframes slide {
  from { left: 100%;}
  to { left: -100%;}
}
@-webkit-keyframes slide {
  from { left: 100%;}
  to { left: -100%;}
}

#marquee { 
  color:red; 
  background:#f0f0f0;
  width:100%;
  height:120px;
  line-height:120px;
  overflow:hidden;
  position:relative;
}

#text {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:120px;
  font-size:30px;
  animation-name: slide;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-name: slide;
  -webkit-animation-duration: 10s;
  -webkit-animation-timing-function:linear;
  -webkit-animation-iteration-count: infinite;
}

<div id="marquee">
	<div id="text">Your Text</div>
</div>

Pode ajustar a velocidade da tenda alterando o valor da animation-duration. E você deve modificar o valor do to dependendo do comprimento do texto.

Actualização apóscomentário de Jay : a tenda falhou quando o texto era maior do que o espaço da tenda. Uma solução seria fazer com que o espaço em branco não envolvesse/quebrasse e animações que tivessem em conta o tamanho do texto (usando as transformações e não apenas a posição para mover o texto):

* {
  margin:0;
  padding:0;
  border:0;
}

@keyframes slide {
  from { left:100%; transform: translate(0, 0); }
  to { left: -100%; transform: translate(-100%, 0); }
}
@-webkit-keyframes slide {
  from { left:100%; transform: translate(0, 0); }
  to { left: -100%; transform: translate(-100%, 0); }
}

.marquee { 
  color:red; 
  background:#f0f0f0;
  width:100%;
  height:120px;
  line-height:120px;
  overflow:hidden;
  position:relative;
}

.text {
  position:absolute;
  top:0;
  white-space: nowrap;
  height:120px;
  font-size:30px;
  animation-name: slide;
  animation-duration: 30s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-name: slide;
  -webkit-animation-duration: 30s;
  -webkit-animation-timing-function:linear;
  -webkit-animation-iteration-count: infinite;
}

<p>Text Fits</p>
<div class="marquee">
	<div class="text">Text Here</div>
</div>

<p>Text overflows</p>
<div class="marquee">
	<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem non lacus condimentum dictum quis id tortor.</div>
</div>

Então o movimento está um pouco agitado no meu navegador. Vou procurar uma solução mais suave, mas isto ... corrigiria o problema do comprimento do texto.