Criando Texto Rolante Com HTML, CSS e JavaScript

Tutoriais

JavaScript

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

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

1. Texto com Rolagem em HTML Simples

Basta adicionar 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 rolante
loop — quantas vezes a rolagem deve se repetir

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

2. Texto com 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. HTML + CSS + JavaScript Texto com Rolagem

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. Rolagem de Texto 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, 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 conforme visto acima.

5. Rolagem de Texto 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 indo para 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 é direto:

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 perfeito, redefinindo a posição do texto quando ele atinge a posição final.

Bônus: Algumas Ideias de Texto Rolante

GIF de Texto Rolante de LED

Saiba mais sobre isso neste link.

Gerador de Texto Rolante da Abertura de Star Wars

Saiba mais sobre isso neste link.

Texto Rolante do Mercado de Ações

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ê vai usar isso? Deixe um comentário para me avisar. 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