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

HTML では、HTML の タグを使用してテキスト スクロール効果を実現でき、 タグにさまざまな属性を設定することでさまざまなテキスト スクロール効果を実現できます。

HTML でテキストのスクロール効果を実現するのは、実際には非常に簡単です。この記事では、HTML タグのさまざまな属性を設定することで得られるさまざまなテキスト スクロール効果を誰もが理解できるようになります。

HTML Marquee タグは、画像やテキストを水平または垂直にスクロールするために使用できる非標準の HTML 要素です。

簡単に言えば、画像やテキストを自動的に上下左右にスクロールします。

見てみましょう単純なテキスト スクロールの実装例:

<marquee> 这是html marquee标签的一个简单滚动例子</marquee >

レンダリング:

スクロールしたいテキストを に入れるだけです。

次に、

HTML タグ のプロパティを見て、HTML タグがどのように画像を設定できるかを見てみましょう。またはテキストスクロール。

Marquee 要素には、マーキー ローリング字幕の外観とスクロール方法を制御および調整するために使用されるいくつかの属性が含まれています。

マーキー タグのローリング字幕設定の例:

これらのプロパティを使用して <マーキー> を設定しましょう; タグ、効果の例を見てください:

1. 単純なローリング サブタイトルの例: 幅、スクロール方法、背景色の設定

<marquee width = "100%" behavior = "scroll" bgcolor = "pink" >     
	这是滚动字幕的一个例子......  
</marquee>

効果の画像:

2. より複雑なスクロール字幕

スクロールする必要があるすべてのコンテンツはスクロール ボックスの全長にわたってスライドしますが、コンテンツを永続的に表示するには最後で停止します。

<marquee width = "100%" behavior = "slide" bgcolor = "pink" >     
   这是一个复杂的滚动字幕例子......  
</marquee >

レンダリング:

3. HTML テキストのスクロール方向を設定します。

マーキー タグのプロパティを設定することで、次のことができます。スクロールするテキストの方向を変更します。方向は左、右、上、下です。

右側の選択ボックスをスクロールする例を見てみましょう。

<marquee width = "100%">     
   文本默认从右向左滚动......  
</marquee >  
<marquee width = "100%" bgcolor = "pink"  direction = "right" >     
   设置文本从左向右滚动......  
</marquee >

レンダリング:

#4. 字幕が円を描くように左右にスクロールするように設定します。テキストは右から左にスクロールします。左から右にスクロールします。

<marquee width = "100%" behavior = "alternate" bgcolor = "pink" >     
   文本从右向左滚动后，在从左向右滚动的例子......  
</marquee>

レンダリング:

5、HTML ネストされたスクロール字幕ボックス ( タグ)

<marquee width = "400px" height ="200px" behavior = "alternate" style ="border:2px solid red" >      
	<marquee behavior = "alternate" >   
	      嵌套滚动字幕框...  
	</marquee >  
</marquee>

レンダリング:

##HTML タグの欠点:

1) マーキー設定 スクロール字幕は次のとおりです。人間の目は常に動きや字幕に惹かれるため、気が散ってしまいます。 2) マーキーで設定したテキストは移動する可能性があるため、スクロール速度によっては静的テキストをクリックするのが難しくなります。

3) Marquee タグ要素は、非標準の HTML 要素です。

4) Marquee によって設定されたスクロール字幕はユーザーの注意を不必要に引きつけ、テキストを読みにくくします。

ブラウザのサポート:

##概要:

この記事はここまでです記事の内容が皆様の学習に役立つことを願っています。

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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

もっと見る

人気の記事

R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）

1 か月前 By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O.最高のグラフィック設定

1 か月前 By 尊渡假赌尊渡假赌尊渡假赌

アサシンのクリードシャドウズ：シーシェルリドルソリューション

2週間前 By DDD

Windows11 KB5054979の新しいものと更新の問題を修正する方法

2週間前 By DDD

Will R.E.P.O.クロスプレイがありますか？

1 か月前 By 尊渡假赌尊渡假赌尊渡假赌

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？

7546

15

CakePHP チュートリアル

1381

52

Steamのアカウント名の形式は何ですか

83

11

Win11 Activation Key Permanent

57

19

NYTの接続はヒントと回答です

21

89

もっと見る

Related knowledge

HTMLの表の境界線 Sep 04, 2024 pm 04:49 PM

HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。

HTML 左マージン Sep 04, 2024 pm 04:48 PM

HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。

HTML のネストされたテーブル Sep 04, 2024 pm 04:49 PM

これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。

HTML テーブルのレイアウト Sep 04, 2024 pm 04:54 PM

HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。

HTML入力プレースホルダー Sep 04, 2024 pm 04:54 PM

HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。

HTML 順序付きリスト Sep 04, 2024 pm 04:43 PM

HTML 順序付きリストのガイド。ここでは、HTML 順序付きリストと型の導入とその例についても説明します。

HTML 内のテキストの移動 Sep 04, 2024 pm 04:45 PM

HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。

HTML の onclick ボタン Sep 04, 2024 pm 04:49 PM

HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。

See all articles

福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！

私たちについて 免責事項 Sitemap

© php.cn All rights reserved