使用HTML、CSS和JavaScript创建滚动文本

教程

JavaScript

当你已经在建立 Web 应用程序方面有超过 25 年的经验，就像我一样，使用 HTML、CSS 和 JavaScript 已经变得如同呼吸般自然。

在本文中，我将向您展示使用这些工具创建滚动文本的一些简单方法，包括使用纯 HTML、HTML 和CSS以及 HTML + CSS + JS 编码滚动文本的五种不同方法。

1. 纯 HTML 滚动文本

只需在文本周围添加标签即可创建滚动效果。这个标签提供了一些有趣的参数，其中包括：

direction — 可以是左、右、上或下
scrollamount — 滚动文本的速度
loop — 滚动重复的次数

注意：这是一个已弃用的 HTML 标签，因此我建议在现代 Web 项目中谨慎使用它。

2. 使用 CSS 创建动画滚动文本

定义一个名为 scroll 的 CSS 动画，用于动画化 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 滚动文本

HTML 代码：

HTML

<div class="scrolling-text">

Scrolling Text Scrolling Text Scrolling Text

</div>

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. 使用 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.

在我看来，jQuery 在这种情况下有点过度，只有在您已经在项目中使用了 jQuery 时才有意义。

当然，animate()也可以用于动画化translateX或translateY属性，就像上面看到的那样。

5. 使用Canvas HTML5滚动文本

这是我最喜欢的方法。特别是因为它非常灵活，提供了很多可能性，比如，例如将滚动文本导出为GIF甚至视频。您可以通过访问PSDDude上的滚动文本生成器，看到其效果，您可以创建自己定制的滚动文本图像和视频。

HTML代码很简单：

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.

使用measureText()上下文方法可以获得文本在屏幕上的大小。这允许通过在到达末尾位置时重置文本位置来创建无缝滚动文本。