Vueはマーキー/テキストスクロール効果を実現します

VUEでMarquee/Textスクロール効果を実装すると、CSSアニメーションまたはサードパーティライブラリを使用できます。この記事では、CSSアニメーション：スクロールテキストを作成し、

でテキストをラップする方法を紹介します。 CSSアニメーションを定義し、オーバーフローを設定します：非表示、幅、アニメーション。キーフレームを定義し、アニメーションの最初と最後に変換を設定します：translatex（）。期間、スクロール速度、方向などのアニメーションプロパティを調整します。

Vueはマーキー/テキストスクロール効果を実現します

それを達成する方法は？

VUEでMarquee/Textスクロール効果を実装すると、CSSアニメーションまたはサードパーティライブラリを使用できます。この記事では、CSSアニメーションの使用方法を紹介します。

ステップ詳細な説明：

1. スクロールテキストの作成： VUEテンプレートで、スクロールする必要があるテキストをラップします。たとえば、 <div class="marquee"><p>{{ text }}</p></div> 。
2. CSSアニメーションの定義： <style></style>タグで、CSSアニメーションを定義します。

 <code class="css">.marquee { overflow: hidden; width: 100%; white-space: nowrap; animation: marquee 10s infinite linear; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }</code>

• overflow: hiddenテキストは、コンテナパーツを越えてテキストを隠します。
• width: 100%コンテナ幅をテキスト幅に等しく設定します。
• animation 、アニメーション名、持続時間、繰り返し数、および再生モードを定義します。
• @keyframesアニメーションキーフレームを定義し、 0%アニメーションが開始されるとき、アニメーションが終了するときに100%意味します。

3. アニメーションのプロパティの調整：必要に応じて、必要に応じて、期間、スクロール速度、方向など、アニメーションプロパティを調整します。

例：

 <code class="vue"><template> <div class="marquee"><p>{{ text }}</p></div> </template> <script> export default { data() { return { text: &#39;这是一条跑马灯&#39; }; } }; </script> <style> .marquee { overflow: hidden; width: 100%; white-space: nowrap; animation: marquee 10s infinite linear; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } </style></code>

知らせ：

• スクロール速度は、アニメーション期間を調整することで制御できます。
• スクロール方向はtransform: translateX() 、 transform: translateX(100%)テキストを右にスクロールします。
• スクロール距離は、コンテナの幅を調整して、コンテナの幅がテキスト幅よりも小さいように制御できます。

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