Creare testo scorrevole con HTML, CSS e JavaScript

Tutorial

JavaScript

Quando hai costruito applicazioni web per oltre 25 anni, come ho fatto io, usare HTML, CSS e JavaScript è diventato naturale.

In questo articolo, ti mostrerò alcuni modi semplici per creare testi scorrevoli utilizzando questi strumenti, tra cui cinque diversi metodi per codificare testi scorrevoli con HTML semplice, HTML e CSS, e infine, HTML + CSS + JS.

1. Testo Scorrevole con HTML Semplice

Basta aggiungere un tag intorno al testo per creare un effetto di scorrimento. Questo tag offre alcuni parametri interessanti, tra cui:

direzione — può essere sinistra, destra, su o giù
scrollamount — la velocità del testo scorrevole
loop — quante volte deve ripetersi lo scorrimento

NOTA: Questo è un tag HTML deprecato, quindi consiglio di usarlo con moderazione per progetti web moderni.

2. Testo Scorrevole Animato con CSS

Definisci un’animazione CSS chiamata scroll che anima la proprietà 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. Testo Scorrevole con HTML + CSS + JavaScript

Codice HTML:

HTML

<div class="scrolling-text">

Scrolling Text Scrolling Text Scrolling Text

</div>

Codice 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. Testo Scorrevole con 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.

Secondo me, jQuery è un po’ eccessivo in questa situazione, ha senso solo se hai già utilizzato jQuery nel tuo progetto.

Certo, animate() può anche essere utilizzato per animare le proprietà translateX o translateY come visto in precedenza.

5. Scorrimento del testo con Canvas HTML5

Questo è il mio metodo preferito. Specialmente perché è così flessibile e offre così tante possibilità, come ad esempio esportare il testo scorrevole come GIF o addirittura video. Puoi vedere tutto ciò in azione andando al generatore di testo scorrevole su PSDDude, dove puoi creare le tue immagini e video di testo scorrevole personalizzati.

Il codice HTML è semplice:

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.

Ottieni la dimensione a schermo del testo utilizzando il metodo di contesto measureText(). Questo consente di creare un testo scorrevole senza interruzioni riposizionando il testo quando raggiunge la posizione finale.

Bonus: Alcune idee per il testo scorrevole

GIF di Testo Scorrevole LED

Scopri di più in questo link.

Generatore di Testo Scorrevole Star Wars Opening Crawl

Scopri di più in questo link.

Testo Scorrevole del Mercato Azionario

Scopri di più qui.

Testo scorrevole sul meteo

Scopri di più su di esso qui.

Questi sono stati creati con il generatore di gif e video di testo scorrevole su PSDDude.

Conclusione

Ora sai come creare testo scorrevole utilizzando HTML, CSS e/o JavaScript.

A cosa lo utilizzerai? Lasciami un commento per farmelo sapere. Inoltre, se pensi che abbia tralasciato un metodo importante per creare testo scorrevole, condividi le tue opinioni a riguardo.

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