社会の継続的な発展に伴い、フロントエンド開発技術はますます成熟してきました。中でもJavaScriptは最も重要なWebフロントエンド開発言語の一つであり、拡張性や操作性に富んでいます。実際の開発では、JavaScriptを使用してフォントの左右スクロール効果など、さまざまな動的効果を実現できます。この記事では、JavaScript を使用してフォントの左右のスクロール効果を実現する方法を詳しく紹介します。
1. HTML 構造
まず、スクロールするフォントを表示するコンテナを HTML で作成する必要があります。 HTML 構造は次のとおりです。
1 2 3 |
|
この構造では、div
コンテナーと span
テキストの 2 つの要素を使用します。このうち、div
コンテナはテキストのスクロール範囲を制限するために使用され、span
テキストはスクロールされるテキストコンテンツです。
2. CSS スタイル
次に、CSS スタイルを使用して上記の HTML 構造を変更し、スクロール効果を与える必要があります。 CSS スタイルは次のとおりです:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
overflow: hidden
属性を使用して、コンテナのスコープを超えたコンテンツを非表示にします。このようにして、すべてのテキスト コンテンツを配置できます。コンテナ内にスクロールされました。同時に、white-space: nowrap
属性を使用して、テキスト コンテンツが折り返されないようにします。 margin-right
この属性はスクロール速度の制御に使用されます。値が大きいほどスクロールは遅くなり、その逆も同様です。
最も重要なことは、CSS3 の animation
プロパティを使用してテキスト スクロール アニメーションを設定することです。 @keyframes
キーワードは、アニメーションのキー フレーム、つまりスクロール効果の開始と終了を宣言するために使用されます。 textScroll
アニメーションでは、初期状態を 0%
に設定し、最終状態を -100%
に設定します。つまり、テキストがロールアウトされます。容器。
3. JavaScript インタラクション
上記の CSS スタイル設定により、スクロール効果のレイアウトが完成しましたが、実際には、スクロール効果はブラウザーのレンダリング効果であり、実際にはスクロール効果ではありません。 JavaScript によって直接実装されます。このスクロール効果を制御するには、ある程度の JavaScript 対話も必要です。次に、JavaScript を使用してテキストのスクロールを開始および停止します。
1 2 3 4 5 6 |
|
document.getElementById
メソッドを使用してスクロールするテキスト要素を取得し、テキスト要素の animation
属性を取得してテキスト アニメーションを取得します。次に、要素の animation
プロパティを none
に設定することで、テキストのスクロール効果を停止できます。最後に、setTimeout
メソッドを使用してテキスト スクロールを非同期的に復元します。つまり、初期の animation
設定を復元します。
上記の JavaScript 操作により、テキストのスクロール効果の実現が完了しました。
4. 概要
これまでのところ、フォントの左右のスクロール効果を実現するための JavaScript の実装に成功しました。テキストのスクロール効果は CSS スタイルを通じて設定でき、テキストのスクロールの開始と停止は JavaScript インタラクションを通じて制御でき、一定の実用性と参考価値があります。この記事が、JavaScript を初めて使用する開発者にとって役立ち、フロントエンド開発テクノロジーの成長をサポートし続けることを願っています。
以上がJavaScript を使用してフォントの左右のスクロール効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。