HTML、CSS、およびJavaScriptを使用してスクロールテキストを作成する

チュートリアル

JavaScript

ウェブアプリケーションを25年以上構築してきた経験があると、HTML、CSS、JavaScriptを使用することは当たり前のようになります。

この記事では、単純な方法でスクロールテキストを作成するための5つの異なる方法を紹介します。プレーンHTML、HTMLとCSS、最後にHTML + CSS + JSを使用したスクロールテキストのコーディング方法も含まれています。

1. プレーンHTMLのスクロールテキスト

テキストを囲むタグを追加するだけでスクロール効果が作成されます。このタグにはいくつかの興味深いパラメータがあります。その中には次のものがあります：

direction — left、right、up、downのいずれか
scrollamount — スクロールテキストの速度
loop — スクロールが繰り返される回数

注意: これは非推奨のHTMLタグですので、現代のWebプロジェクトで使用する際には慎重さをお勧めします。

2. CSSでアニメーションされたスクロールテキスト

translateXプロパティをアニメートするscrollというCSSアニメーションを定義します。

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()コンテキストメソッドを使用してテキストの画面上のサイズを取得します。これにより、テキストが終了位置に達したときにテキスト位置をリセットしてシームレスなスクロールテキストを作成できます。