Creando Texto Desplazable Con HTML, CSS y JavaScript

Tutoriales

JavaScript

Cuando has estado construyendo aplicaciones web por más de 25 años, como lo he hecho, el uso de HTML, CSS y JavaScript se ha vuelto algo natural.

En este artículo, te mostraré algunas formas simples de crear texto con desplazamiento utilizando estas herramientas, incluyendo cinco métodos diferentes para codificar texto con desplazamiento con HTML básico, HTML y CSS, y finalmente, HTML + CSS + JS.

1. Texto con Desplazamiento en HTML Básico

Simplemente agrega una etiqueta alrededor del texto para crear un efecto de desplazamiento. Esta etiqueta ofrece algunos parámetros interesantes, entre los cuales:

dirección — puede ser izquierda, derecha, arriba o abajo
scrollamount — la velocidad del texto con desplazamiento
loop — cuántas veces debe repetirse el desplazamiento

NOTA: Esta es una etiqueta HTML obsoleta, por lo que recomendaría moderación al usarla en proyectos web modernos.

2. Texto con Desplazamiento Animado con CSS

Define una animación CSS llamada scroll que anima la propiedad 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 con Desplazamiento en 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. Desplazar Texto 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.

En mi opinión, jQuery es un poco excesivo en esta situación, y solo tiene sentido si ya has utilizado jQuery en tu proyecto.

Por supuesto, animate() también se puede usar para animar las propiedades translateX o translateY como se vio arriba.

5. Texto Desplazante Con Canvas HTML5

Este es mi método favorito. Especialmente porque es tan flexible y ofrece tantas posibilidades, como, por ejemplo, exportar el texto desplazante como GIF o incluso video. Puedes ver esto en acción yendo al generador de Texto Desplazante en PSDDude, donde puedes crear tus propias imágenes y videos personalizados de texto desplazante.

El código HTML es sencillo:

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.

Obtienes el tamaño en pantalla del texto utilizando el método de contexto measureText(). Esto permite crear un texto desplazante continuo al reiniciar la posición del texto cuando alcanza la posición final.

Bonus: Algunas Ideas de Texto Desplazante

GIF de Texto Desplazante LED

Aprende más sobre esto en este enlace.

Generador de Texto Desplazante de la Introducción de Star Wars

Aprende más sobre esto en este enlace.

Texto Desplazante del Mercado de Valores

Aprende más aquí.

Texto de desplazamiento del clima

Aprende más al respecto aquí.

Estos fueron creados con el generador de gifs y videos de texto en movimiento en PSDDude.

Conclusión

Ahora sabes cómo hacer texto en movimiento usando HTML, CSS, y/o JavaScript.

¿Para qué vas a utilizar esto? Déjame un comentario para que lo sepamos. Además, si crees que me he saltado algún método importante para crear texto en movimiento, comparte tus ideas al respecto.

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