ホームページ > 記事 > ウェブフロントエンド > HTML でテキストのスクロール効果を実現する方法
HTML でテキストのスクロール効果を実現する方法
- 青灯夜游オリジナル
- 2021-05-19 15:08:4216150ブラウズ
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>表示効果をより明確にするために、ここではページの背景を黒に設定し、スクロールするテキストを白に設定しています。
このようにして、最も単純なスクロール テキストを実装しました。スクロール テキストには、スクロール方向を制御するための属性もいくつかあります。速度など、よく使われるプロパティをいくつか比較してみましょう。
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>
動作スクロール メソッド属性
スクロール メソッドは、次の方法で設定できます。スポーツなどの前後の動作。動作に使用できる値は、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>
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>
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 サイトの他の関連記事を参照してください。