HTML マーキー テキストの速度を変更する

1. <marquee> タグの scrollamount 属性を使用してテキストのスクロール速度を制御する
2. <marquee> タグの scrolldelay 属性を使用してテキストのスクロール速度を制御する

HTML では、<marquee> タグを使用して、移動またはスクロールするテキスト アニメーションを作成できます。 左から右、右から左、下から上、上から下の 4 方向にスクロールするテキストを作成し、速度を変更し、direction 属性の値を設定して方向を設定できます。 スクロールするテキスト。

この記事では、HTML の タグの速度の変更に焦点を当てます。

<marquee> タグの scrollamount 属性を使用してテキストのスクロール速度を制御する

scrollamount 属性は、<marquee> タグのテキストのスクロール速度を設定します。 文字列形式の数値を取ります。

属性の値は、特定の時間間隔でスクロールするピクセル数を示します。 scrollamount 属性のデフォルト値は 6px です。

たとえば、さまざまな scrollamount 値を持つさまざまな <marquee> タグを作成しました。 出力では、ユーザーはさまざまな scrollamount でテキストの速度を観察できます。

scrollmount の値が大きいほど、テキストは速く移動します。

コード例:

HTML

 htmlCopy<marquee behavior=scroll direction="left" scrollamount="2">scrollamount = 2</marquee>
<marquee behavior=scroll direction="left" scrollamount="6">scrollamount = 6</marquee>
<marquee behavior=scroll direction="right" scrollamount="10">scrollamount = 10</marquee>
<marquee behavior=scroll direction="right" scrollamount="15">scrollamount = 15</marquee>

出力：

Run Above Code

上記の出力では、scrollamount および direction 属性の値に応じて、さまざまなテキストがさまざまな方向にさまざまな速度で移動していることがわかります。

<marquee> タグの scrolldelay 属性を使用してテキストのスクロール速度を制御する

scrolldelay 属性を使用して、各スクロールの時間間隔を設定できます。 文字列形式のミリ秒単位の値を受け入れます。

scrolldelay 属性のデフォルト値は 85 で、60 未満の値は受け入れません。この例では、scrolldelay 属性の値が異なる別の <marquee> タグを作成しました。

コード例:

HTML

 htmlCopy<marquee behavior=scroll direction="left" scrolldelay="200">scrolldelay = 200ms</marquee>
<marquee behavior=scroll direction="right" scrolldelay="61">scrolldelay = 61ms</marquee>
<marquee behavior=scroll direction="left" scrolldelay="300">scrolldelay = 300ms</marquee>
<marquee behavior=scroll direction="right" scrolldelay="150">scrolldelay = 150ms</marquee>

出力：

Run Above Code

上記の出力では、scrolldelay 属性の値が増加すると、各スクロールの間隔が長くなるにつれてテキストの移動が遅くなることがわかります。 scrolldelay および scrollamount 属性は、HTML5 で廃止されました。 そのため、一部の最新のブラウザーではサポートされていない可能性があります。

チュートリアルを楽しんでいますか？ <a href="https://www.youtube.com/@delftstack/?sub_confirmation=1" style="color: #a94442; font-weight: bold; text-decoration: underline;">DelftStackをチャンネル登録</a> して、高品質な動画ガイドをさらに制作するためのサポートをお願いします。 Subscribe

著者： Shubham Vora

Shubham is a software developer interested in learning and writing about various technologies. He loves to help people by sharing vast knowledge about modern technologies via different platforms such as the DelftStack.com website.

LinkedIn GitHub