使用 HTML、CSS 和 JavaScript 創建滾動文本

教學

JavaScript

當您已經建立網絡應用程式超過25年，就像我所做的那樣，使用HTML、CSS和JavaScript已經變得如同呼吸一般自然。

在本文中，我將展示一些使用這些工具創建滾動文本的簡單方法，包括使用純HTML、HTML和CSS以及HTML + CSS + JS編碼滾動文本的五種不同方法。

1. 純HTML滾動文本

只需在文本周圍添加一個標籤即可創建滾動效果。此標籤提供一些有趣的參數，其中包括：

direction — 可以是左、右、上或下
scrollamount — 滾動文本的速度
loop — 滾動應重複多少次

注意：這是一個不建議使用的HTML標籤，因此我建議在現代網絡項目中使用時要謹慎。

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. 使用 HTML5 Canvas 滾動文本

這是我最喜歡的方法。特別是因為它非常靈活，提供了許多可能性，例如，將滾動文本導出為 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() 上下文方法獲取文本在螢幕上的大小。這允許在文本達到結束位置時重置文本位置以創建無縫的滾動文本。