Vue を使用してテキストスクロール効果を実装する方法-Vue.js-php.cn

Vue を使用してテキストスクロール効果を実装する方法

王林

リリース： 2023-09-19 10:31:43

オリジナル

1448 人が閲覧しました

Vue を使用してテキストスクロール効果を実装する方法

はじめに:
現代の Web 開発では、ページの対話性と魅力を高めるために、ユーザーエクスペリエンスを向上させるために、特殊効果を追加する必要があることがよくあります。テキストスクロール効果は一般的な効果の 1 つで、ページ上のテキストを静的ではなく動的にスクロールさせることができます。この記事では、Vue を使用してテキストスクロール効果を実装する方法を詳しく紹介し、具体的なコード例を示します。

技術的な準備:
始める前に、次のテクノロジスタックがインストールされていることを確認してください:

Vue.js - ユーザーインターフェイスを構築するための一般的な JavaScript フレームワーク。
Vue CLI - Vue プロジェクトを迅速に構築できるスキャフォールディングツール。

実装手順:

Vue プロジェクトの作成:
Vue CLI を使用して新しい Vue プロジェクトを作成します。これは次のコマンドで完了できます。 :
```
vue create text-scrolling-demo
```
ログイン後にコピー
プロンプトに従って必要な構成を選択し、プロジェクトが作成されるまで待ちます。

コンポーネントの作成:
src ディレクトリに新しいコンポーネントファイルを作成し、TextScrolling.vue という名前を付けます。
このコンポーネントでは、CSS スタイルを通じてテキストのスクロール効果を実装し、Vue の応答データを通じてスクロールテキストのコンテンツを制御する必要があります。
具体的なコードは次のとおりです:

<template>
  <div class="text-scrolling">
 <div class="content" v-if="showText">
   <ul ref="scrollContainer" :style="{ animationDuration: duration + 's' }">
     <li v-for="(item, index) in textArray" :key="index" class="text-item">{{ item }}</li>
   </ul>
 </div>
  </div>
</template>

<script>
export default {
  data() {
 return {
   textArray: [], // 存储滚动文字的数组
   duration: 0, // 动画的持续时间
   showText: false // 控制滚动文字的显示与隐藏
 }
  },
  mounted() {
 this.initTextArray()
  },
  methods: {
 initTextArray() {
   // 初始化滚动文字的数组，可以从后端接口获取数据并进行处理
   const originalText = '这是一段需要滚动显示的文字，可以根据实际需求进行修改。'
   this.textArray = Array.from(originalText)
   this.showText = true
   this.startScrollAnimation()
 },
 startScrollAnimation() {
   // 计算动画的持续时间，根据文字的长度和滚动速度进行调整
   const containerWidth = this.$refs.scrollContainer.clientWidth
   const itemWidth = this.$refs.scrollContainer.firstElementChild.clientWidth
   const textLength = this.textArray.length
   this.duration = (textLength * itemWidth) / containerWidth

   // 设置动画的循环播放
   const animationEndEvent = 'animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd'
   const animationContainer = this.$refs.scrollContainer
   animationContainer.addEventListener(animationEndEvent, () => {
     this.startScrollAnimation()
   })
 }
  }
}
</script>

<style scoped>
.text-scrolling {
  width: 200px;
  height: 30px;
  overflow: hidden;
  border: 1px solid #ccc;
}

.content {
  white-space: nowrap;
  animation: scrollText linear infinite;
  -webkit-animation: scrollText linear infinite;
  -moz-animation: scrollText linear infinite;
  -o-animation: scrollText linear infinite;
  -ms-animation: scrollText linear infinite;
}

@keyframes scrollText {
  0% {
 transform: translateX(0);
  }
  100% {
 transform: translateX(-100%);
  }
}

@-webkit-keyframes scrollText {
  0% {
 transform: translateX(0);
  }
  100% {
 transform: translateX(-100%);
  }
}

@-moz-keyframes scrollText {
  0% {
 transform: translateX(0);
  }
  100% {
 transform: translateX(-100%);
  }
}

@-o-keyframes scrollText {
  0% {
 transform: translateX(0);
  }
  100% {
 transform: translateX(-100%);
  }
}

@-ms-keyframes scrollText {
  0% {
 transform: translateX(0);
  }
  100% {
 transform: translateX(-100%);
  }
}

.text-item {
  display: inline-block;
  padding: 0 5px;
}
</style>

ログイン後にコピー

App.vue でコンポーネントを使用する:
作成したばかりの TextScrolling コンポーネントを App.vue に導入して使用します。
具体的なコードは次のとおりです:

<template>
  <div id="app">
 <TextScrolling></TextScrolling>
  </div>
</template>

<script>
import TextScrolling from './components/TextScrolling'

export default {
  components: {
 TextScrolling
  }
}
</script>

<style>
#app {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>

ログイン後にコピー

プロジェクトを実行します:
ターミナルで次のコマンドを実行してプロジェクトを実行します:
```
npm run serve
```
ログイン後にコピー
Openブラウザで http://localhost:8080 にアクセスすると、テキストスクロール効果のあるページが表示されます。

概要:
上記の手順により、Vue を使用してテキストスクロール効果を実装することに成功しました。コンポーネントでは、テキストのスクロール効果は CSS スタイルによって実現され、テキストコンテンツは Vue の応答データによって制御され、動的なスクロール効果は Vue のライフサイクル関数とイベントモニタリングを使用して実現されます。この記事が、Vue を理解し、Vue を使用してさまざまな興味深い特殊効果を実現するのに役立つことを願っています。

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