HTML でテキストのスクロール効果を実現する方法-htmlチュートリアル-php.cn

HTML でテキストのスクロール効果を実現する方法

青灯夜游

リリース： 2023-01-06 11:14:13

オリジナル

16212 人が閲覧しました

HTML では、マーキータグを使用して、スクロールテキスト効果を実現できます。このタグは、ドキュメントにスクロールテキストを挿入できます。構文形式は、「text that」です。スクロールする必要があります marquee>「マーキータグのプロパティは、テキストがコンテナの端に達したときの動作を制御するために使用されます。

HTML でテキストのスクロール効果を実現する方法

このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。

マーキースクロールテキストタグ

ページには、ダイナミックテキスト、ダイナミックイメージ、オーディオ、ビデオなどの多くのマルチメディア要素が存在しますが、最も単純なものは、 1 つは非常に高いスクロールテキストです。HTML でスクロールテキストを追加したい場合は、marquee タグを使用する必要があります。
まず最も単純な例を見てみましょう:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>marquee</title>
    </head>

    <body style="background: black;padding: 20px;">
        <marquee><span style="font-weight: bolder;font-size: 40px;color: white;">Welcom CSDN!</span></marquee>
    </body>
</html>

ログイン後にコピー

表示効果をより明確にするために、ここではページの背景を黒に設定し、スクロールするテキストを白に設定しています。

HTML でテキストのスクロール効果を実現する方法

このようにして、最も単純なスクロールテキストを実装しました。スクロールテキストには、スクロール方向を制御するための属性もいくつかあります。速度など、よく使われるプロパティをいくつか比較してみましょう。

direction スクロール方向属性

デフォルトでは、テキストは右から左にスクロールします。実際のアプリケーションでは、方向を変更する必要がある場合があります。この属性で使用可能な値は、up、down、left、right で、それぞれ上、下、左、右にスクロールします。

例は次のとおりです。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>marquee</title>
        <style>
            body {
                background: black;
                padding: 20px;
            }

            marquee {
                font-weight: bolder;
                font-size: 40px;
                color: white;
            }
        </style>
    </head>

    <body>
        <marquee direction="up">UP</marquee>
        <marquee direction="down">DOWN</marquee>
        <marquee direction="left">LEFT</marquee>
        <marquee direction="right">RIGHT</marquee>
    </body>

</html>

ログイン後にコピー

HTML でテキストのスクロール効果を実現する方法

動作スクロールメソッド属性

スクロールメソッドは、次の方法で設定できます。スポーツなどの前後の動作。動作に使用できる値は、scroll、slide、alternate です。これらはそれぞれ、循環スクロール、一度スクロールして停止する、交互にスクロールして戻る、スクロールを表します。前方へ。

例は次のとおりです。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>marquee</title>
        <style>
            body {
                background: black;
                padding: 20px;
            }

            marquee {
                font-weight: bolder;
                font-size: 40px;
                color: white;
            }
        </style>
    </head>

    <body>
        <marquee behavior="scroll">scroll</marquee>
        <marquee behavior="slide">slide</marquee>
        <marquee behavior="alternate">alternate</marquee>
    </body>

</html>

ログイン後にコピー

HTML でテキストのスクロール効果を実現する方法

scrolllay スクロール遅延属性とscrollamount スクロール速度属性

スクロール遅延属性を使用します。テキストスクロールの時間間隔を設定します。スクロール遅延の時間間隔の単位はミリ秒です。この時間間隔は 2 つのスクロールステップ間の時間間隔として設定されます。時間が長すぎると、ストップアンドゴー効果が発生します。
scrollmount は、スクロールのステップサイズを設定するために使用されます。
例は次のとおりです。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>marquee</title>
        <style>
            body {
                background: black;
                padding: 20px;
            }

            marquee {
                font-weight: bolder;
                font-size: 40px;
                color: white;
            }
        </style>
    </head>

    <body>
        <marquee scrolldelay="800" scrollamount="100">Welcom CSDN!</marquee>
    </body>

</html>

ログイン後にコピー

HTML でテキストのスクロール効果を実現する方法

loop スクロールループ属性

スクロール後にテキストを停止したい場合は、何度かループ属性を使用できます。

例は次のとおりです:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>marquee</title>
        <style>
            body {
                background: black;
                padding: 20px;
            }

            marquee {
                font-weight: bolder;
                font-size: 40px;
                color: white;
            }
        </style>
    </head>

    <body>
        <marquee loop="2">Welcom CSDN!</marquee>
    </body>

</html>

ログイン後にコピー

推奨チュートリアル: "html ビデオチュートリアル "

以上がHTML でテキストのスクロール効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。