コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > HTMLでテキストのスクロール効果を実現する方法

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

青灯夜游
リリース： 2018-11-29 09:30:58
オリジナル
34502 人が閲覧しました

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

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

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

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

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

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

<marquee> 这是html marquee标签的一个简单滚动例子</marquee >
ログイン後にコピー

レンダリング:

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

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


次に、

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

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

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

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

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

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

<marquee width = "100%" behavior = "scroll" bgcolor = "pink" >     
	这是滚动字幕的一个例子......  
</marquee>
ログイン後にコピー

効果の画像:

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

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

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

<marquee width = "100%" behavior = "slide" bgcolor = "pink" >     
   这是一个复杂的滚动字幕例子......  
</marquee >
ログイン後にコピー

レンダリング:

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

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

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

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

<marquee width = "100%">     
   文本默认从右向左滚动......  
</marquee >  
<marquee width = "100%" bgcolor = "pink"  direction = "right" >     
   设置文本从左向右滚动......  
</marquee >
ログイン後にコピー

レンダリング:


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

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

<marquee width = "100%" behavior = "alternate" bgcolor = "pink" >     
   文本从右向左滚动后，在从左向右滚动的例子......  
</marquee>
ログイン後にコピー

レンダリング:


5、HTML ネストされたスクロール字幕ボックス ( タグ)HTMLでテキストのスクロール効果を実現する方法
<marquee width = "400px" height ="200px" behavior = "alternate" style ="border:2px solid red" >      
	<marquee behavior = "alternate" >   
	      嵌套滚动字幕框...  
	</marquee >  
</marquee>
ログイン後にコピー
レンダリング:

##HTML タグの欠点: HTMLでテキストのスクロール効果を実現する方法

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

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

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

ブラウザのサポート:

##概要:

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

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

関連ラベル：
html marquee
ソース：php.cn
前の記事：HTML5のキャンバスとSVGの違いは何ですか 次の記事：HTML5とHTML4の違いは何ですか
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
width プロパティを追加してコンテンツを左に移動します。 ボディに余白を設けました。 main {left margin: 200px; right margin: 200px; textalignment: center} テキストを1...
から 2024-04-06 22:01:35
0
3
816
Web アプリケーションでバージョン情報を表示するためのベスト プラクティスは何ですか? Webアプリケーションを開発しています。 Web アプリケーションでバージョン情報を表示するためのベスト プラクティスは何ですか?私はセマンティック バージョニングを使用しており、...
から 2024-04-06 19:13:16
0
2
476
Laravel 8 - /{editable_text} ルートを /{user} ルートにリダイレクトする方法 ユーザープロファイルに誘導するリダイレクトルートを作成しようとしています。リダイレクト ルートはユーザー データベースからの文字列/テキストである必要があり、同じユーザー プロファ...
から 2024-04-06 17:26:11
0
1
410
React Three Fiber: スクロール イベントが遅れるのはなぜですか? ReactThreeFiber には、カメラのズーム全体にわたって保持したいスプライトを生成する React コンポーネントがあります。アルゴリズムは機能しているようですが (サイ...
から 2024-04-06 13:39:24
0
1
410
Live Server を使用する Web サイトをファイルから起動すると機能しません いくつかのブラウザを試してみましたが、いずれの場合も Web サイトは LiveServer で正常に動作しました。一方、Firefox/Chrome を使用してサイトを起動すると...
から 2024-04-06 12:46:18
0
1
403
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート