JavaScript を使用してフォントの左右のスクロール効果を実現する方法

社会の継続的な発展に伴い、フロントエンド開発技術はますます成熟してきました。中でもJavaScriptは最も重要なWebフロントエンド開発言語の一つであり、拡張性や操作性に富んでいます。実際の開発では、JavaScriptを使用してフォントの左右スクロール効果など、さまざまな動的効果を実現できます。この記事では、JavaScript を使用してフォントの左右のスクロール効果を実現する方法を詳しく紹介します。

1. HTML 構造

まず、スクロールするフォントを表示するコンテナを HTML で作成する必要があります。 HTML 構造は次のとおりです。

<div id="scrollBox">
  <span id="scrollText">这是一段要滚动的文本This is a roll text.</span>
</div>

この構造では、div コンテナーと span テキストの 2 つの要素を使用します。このうち、divコンテナはテキストのスクロール範囲を制限するために使用され、spanテキストはスクロールされるテキストコンテンツです。

2. CSS スタイル

次に、CSS スタイルを使用して上記の HTML 構造を変更し、スクロール効果を与える必要があります。 CSS スタイルは次のとおりです:

#scrollBox {
  width: 200px; /* 容器宽度 */
  height: 30px; /* 容器高度 */
  overflow: hidden; /* 隐藏超出容器部分的内容 */
  border: 1px solid #ddd; /* 容器边框 */
}
#scrollText {
  display: inline-block; /* 文本块级元素转为内联块级 */
  white-space: nowrap; /* 不允许文本换行 */
  font-size: 16px; /* 字体大小 */
  color: #333; /* 字体颜色 */
  margin-right: 20px; /* 右侧空隙，用于控制滚动速度 */
  animation: textScroll 10s linear infinite; /* 文本滚动动画 */
}
@keyframes textScroll {
  0% { transform: translateX(0); } /* 初始状态 */
  100% { transform: translateX(-100%); } /* 最终状态 */
}

overflow: hidden 属性を使用して、コンテナのスコープを超えたコンテンツを非表示にします。このようにして、すべてのテキスト コンテンツを配置できます。コンテナ内にスクロールされました。同時に、white-space: nowrap 属性を使用して、テキスト コンテンツが折り返されないようにします。 margin-rightこの属性はスクロール速度の制御に使用されます。値が大きいほどスクロールは遅くなり、その逆も同様です。

最も重要なことは、CSS3 の animation プロパティを使用してテキスト スクロール アニメーションを設定することです。 @keyframesキーワードは、アニメーションのキー フレーム、つまりスクロール効果の開始と終了を宣言するために使用されます。 textScroll アニメーションでは、初期状態を 0% に設定し、最終状態を -100% に設定します。つまり、テキストがロールアウトされます。容器。

3. JavaScript インタラクション

上記の CSS スタイル設定により、スクロール効果のレイアウトが完成しましたが、実際には、スクロール効果はブラウザーのレンダリング効果であり、実際にはスクロール効果ではありません。 JavaScript によって直接実装されます。このスクロール効果を制御するには、ある程度の JavaScript 対話も必要です。次に、JavaScript を使用してテキストのスクロールを開始および停止します。

var textEle = document.getElementById('scrollText'); // 获取文本元素
var textAnimation = textEle.style.animation; // 获取文本动画
textEle.style.animation = 'none'; // 停止文本滚动
window.setTimeout(function() {
  textEle.style.animation = textAnimation; // 恢复文本滚动
}, 0);

document.getElementById メソッドを使用してスクロールするテキスト要素を取得し、テキスト要素の animation 属性を取得してテキスト アニメーションを取得します。次に、要素の animation プロパティを none に設定することで、テキストのスクロール効果を停止できます。最後に、setTimeout メソッドを使用してテキスト スクロールを非同期的に復元します。つまり、初期の animation 設定を復元します。

上記の JavaScript 操作により、テキストのスクロール効果の実現が完了しました。

4. 概要

これまでのところ、フォントの左右のスクロール効果を実現するための JavaScript の実装に成功しました。テキストのスクロール効果は CSS スタイルを通じて設定でき、テキストのスクロールの開始と停止は JavaScript インタラクションを通じて制御でき、一定の実用性と参考価値があります。この記事が、JavaScript を初めて使用する開発者にとって役立ち、フロントエンド開発テクノロジーの成長をサポートし続けることを願っています。

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