Vue でテキストが長すぎる場合に非表示のマーキーの自動スクロール効果を実装する方法

近年、フロントエンド技術の発展により、斬新かつ実用的な特殊効果が次々と登場しています。その中でも、テキスト スクロールの特殊効果であるマーキー (自動スクロールとも呼ばれる) は、徐々に多くの Web サイトやアプリケーションで一般的な機能の 1 つになりつつあります。

フロントエンド フレームワークの中で、Vue.js は非常に人気のある選択肢です。この記事では、Vue でテキストが長すぎる場合にマーキーを非表示にする自動スクロール効果を実現する方法を紹介します。

1. 基本原理

マーキー効果の原理は非常に単純です: テキストを固定コンテナーに配置します。テキストの長さがコンテナーの長さ制限を超えると、テキストはコンテナーは位置決めモードに設定されており、アニメーションを使用してテキストを左に移動させ続け、マーキー効果を実現します。

マーキー効果を実現するときは、次のことを行う必要があります:

1. CSS を使用してテキスト コンテナの高さと幅を制御し、均一で美しいスタイルを保証します;
2. テキスト コンテナのオーバーフロー非表示属性を設定して、テキストがオーバーフローするのを防ぎます;
3. テキストを囲む要素のレイヤーをラップし、アニメーションによってその位置を継続的に変更することで、自動スクロールの効果を実現します

2. 具体的な実装

##まず、HTML で 2 つのコンテナ、つまりテキストを表示するコンテナとテキストを折り返すコンテナを定義します。

1. <div class="scroll-container">
     <div class="text-container">
       这是需要被滚动的内容
     </div>
   </div>

   ログイン後にコピー

次に、CSS でテキスト コンテナを絶対配置に設定し、幅、高さ、オーバーフローの非表示プロパティを設定します。

2. .scroll-container {
     position: relative;
     height: 50px;
     overflow: hidden;
   }
   
   .text-container {
     position: absolute;
     left: 0;
     top: 0;
     white-space: nowrap;
   }

   ログイン後にコピー

上記の CSS では、テキスト コンテナを絶対位置に設定し、親コンテナの左上隅に配置します。同時に、テキストコンテナの幅は100%、高さは50px、オーバーフロー属性は「非表示」に設定されます。つまり、コンテナ内のコンテンツが長すぎる場合、余分な部分は表示されません。隠蔽される。

次に、vue.js を使用してアニメーション効果を実現する必要があります。 Vue.js テンプレートでは、テキストをラップするコンテナに「transition」属性を追加し、アニメーション効果を「left」から「-100%」に設定します。

3. <template>
     <div class="scroll-container">
       <div class="text-container" :style="{left: position + &#39;%&#39;}">
         这是需要被滚动的内容
       </div>
     </div>
   </template>
   
   <style>
   .scroll-container {
     position: relative;
     height: 50px;
     overflow: hidden;
   }
   
   .text-container {
     position: absolute;
     left: 0;
     top: 0;
     white-space: nowrap;
     transition: left 5s linear;
   }
   </style>
   
   <script>
   export default {
     data () {
       return {
         position: 0
       }
     },
     mounted () {
       setInterval(() => {
         this.position -= 100;
         if (this.position < -100) {
           this.position = 0;
         }
       }, 5000)
     }
   }
   </script>

   ログイン後にコピー

上記のコードでは、vue.js を使用してアニメーション効果を実現しています。 setInterval タイマーにより、「position」属性値が 5 秒ごとに 100 減算され、自動テキスト スクロールの効果が得られます。同時にマーキーが左端までスクロールすると、「position」属性値が0にリセットされ、テキストの無限ループスクロール機能が実現されます。

3. 概要

テキストが長すぎる場合にティッカーの自動スクロールを非表示にする効果は、今日の Web サイトやアプリケーションでますます一般的になってきています。 Vue.js フレームワークの実装により、この機能を迅速かつ便利に実装できるだけでなく、Web ページ内のテキスト コンテンツを美しく滑らかな形式でユーザーに表示することもできます。この記事が、Vue を使用して、テキストが長すぎる場合にマーキーを非表示にする自動スクロール効果を実現するのに役立つことを願っています。

以上がVue でテキストが長すぎる場合に非表示のマーキーの自動スクロール効果を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。