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 サイトの他の関連記事を参照してください。