Criando Texto Rolante Com HTML, CSS e JavaScript

Tutoriais

JavaScript

Quando você tem construído aplicações web por mais de 25 anos, como eu fiz, usar HTML, CSS e JavaScript se tornou algo natural.

Neste artigo, vou mostrar algumas maneiras simples de criar texto em rolagem usando essas ferramentas, incluindo cinco métodos diferentes para codificar texto em rolagem com HTML simples, HTML e CSS, e finalmente, HTML + CSS + JS.

1. Texto em Rolagem HTML Simples

Simplesmente adicione uma tag ao redor do texto para criar um efeito de rolagem. Esta tag oferece alguns parâmetros interessantes, entre os quais:

direction — pode ser esquerda, direita, cima ou baixo
scrollamount — a velocidade do texto em rolagem
loop — quantas vezes a rolagem deve se repetir

NOTA: Esta é uma tag HTML obsoleta, então eu recomendaria moderação ao usá-la para projetos web modernos.

2. Texto em Rolagem Animado Com CSS

Defina uma animação CSS chamada scroll que anima a propriedade translateX.

CSS

@keyframes scroll {

 0% { transform: translateX(100%); }

 100% { transform: translateX(-100%); }

}

Then apply that animation to your text element:

HTML

<div class="scrolling-text">Scrolling Text</div>

By adding this CSS:

Plain Text

.scrolling-text {

width: 100%;

overflow: hidden;

white-space: nowrap;

box-sizing: border-box;

animation: scroll 10s linear infinite;

}

Changing from translateX to translateY will give you a vertical scrolling text. Switching 0% and 100% around will give you the reverse scrolling text direction. And in the .scrolling-text CSS class, if you change the 10s duration of the animation, you change the speed of the scrolling text.

3. Texto em Rolagem HTML + CSS + JavaScript

Código HTML:

HTML

<div class="scrolling-text">

Scrolling Text Scrolling Text Scrolling Text

</div>

Código CSS:

CSS

.scrolling-text {

width: 30vw;

white-space: nowrap;

overflow: hidden;

box-sizing: border-box;

font-size:clamp(16px,50dvh,220px);

white-space:nowrap;

margin: 0 auto;

}

JavaScript code:

JavaScript

const container = document.querySelector('.scrolling-text');

let scrollAmount = 0;

​

setInterval(() => {

 scrollAmount += 10;

 container.scrollLeft = scrollAmount;

 if (scrollAmount >= container.scrollWidth) {

  scrollAmount = 0;

 }

}, 20);

This is my most “unelegant” solution for making scrolling text. Basically, it’s cramming text in a container with a scroll and changing the scrolling of the container programmatically. When the scroll amount goes over the container amount, it resets.

4. Texto em Rolagem Com jQuery

CSS

$(document).ready(

 function loop() {

  $('.scrolling-text').css({scrollLeft:0});

  $('.scrolling-text').animate({ scrollLeft: "+=1000" }, 10000, 'linear', loop);

 }

);

Use the animate() jQuery function to animate the scrollLeft property, and this will create a scrolling text effect.

Na minha opinião, jQuery é um pouco exagerado nesta situação, e só faz sentido se você já tiver usado jQuery em seu projeto.

Claro, animate() também pode ser usado para animar as propriedades translateX ou translateY como visto acima.

5. Texto Rolante Com Canvas HTML5

Este é o meu método favorito. Especialmente porque é tão flexível e oferece tantas possibilidades, como, por exemplo, exportar o texto rolante como GIF ou até mesmo vídeo. Você pode ver isso em ação acessando o Gerador de Texto Rolante no PSDDude, onde você pode criar suas próprias imagens e vídeos de texto rolante personalizados.

O código HTML é simples:

HTML

<canvas id="scrollingCanvas" width="300" height="50"></canvas>

And the JS is where the magic happens:

JavaScript

const canvas = document.getElementById('scrollingCanvas');

const ctx = canvas.getContext('2d');

const text = "Scrolling Text Example";

let x = canvas.width;

​

function draw() {

 ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas

 ctx.font = '20px Arial';

 ctx.fillStyle = 'black';

 ctx.fillText(text, x, 30);

 x -= 2; // Adjust speed of scrolling here

 if (x < -ctx.measureText(text).width) {

  x = canvas.width; // Reset position when text is out of view

 }

 requestAnimationFrame(draw);

}

​
draw();

Using a loop with requestAnimationFrame() calling the function draw() is actually the way HTML5 games implement their graphics drawing. This is a cool way to create smooth-scrolling text.

Você obtém o tamanho na tela do texto usando o método de contexto measureText(). Isso permite criar um texto rolante contínuo redefinindo a posição do texto quando ele alcança a posição final.

Bônus: Algumas Ideias para Texto Rolante

GIF de Texto Rolante em LED

Saiba mais sobre isso neste link.

Gerador de Texto Rolante da Abertura de Star Wars

Saiba mais sobre isso neste link.

Texto Rolante da Bolsa de Valores

Saiba mais aqui.

Texto Rolante do Tempo

Saiba mais sobre isso aqui.

Esses foram criados com o gerador de gif e vídeo de texto rolante no PSDDude.

Conclusão

Agora você sabe como fazer texto rolante usando HTML, CSS e/ou JavaScript.

Para que você usará isso? Deixe um comentário para me informar. Além disso, se você achar que eu perdi um método importante para criar texto rolante, compartilhe seus pensamentos sobre isso.

Source:
https://dzone.com/articles/scrolling-text-html-css-javascript