Vue を使用してシームレスなスクロール効果を実現する方法

Vue を使用してシームレスなスクロール効果を実現する方法

Web 開発の発展に伴い、スクロール効果は多くの Web デザインで必要な要素になりました。 Vue フレームワークでは、その応答性とコンポーネント化のアイデアを使用して、シームレスなスクロール効果を実現できます。この記事では、Vue を使用してシームレスなスクロール効果を実現する簡単な方法を紹介し、対応するコード例を示します。

まず、シームレスなスクロール効果を実現するために Vue コンポーネントを作成する必要があります。 SeamlessScroll という名前を付けることができます:

<template>
  <div class="seamless-scroll">
    <div class="scroll-wrap" :style="scrollStyle">
      <slot></slot>
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      scrollStyle: {
        transform: "translateX(0)",
        transition: "transform 0.5s linear"
      },
      scrollWidth: 0,
      scrollLeft: 0,
      timer: null
    };
  },
  mounted() {
    this.scrollWidth = this.$refs.scrollWrap.offsetWidth;
    this.startScroll();
  },
  methods: {
    startScroll() {
      this.timer = setInterval(() => {
        this.scrollLeft--;
        if (this.scrollLeft <= -this.scrollWidth) {
          this.scrollLeft = 0;
        }
        this.scrollStyle.transform = `translateX(${this.scrollLeft}px)`;
      }, 30);
    }
  }
};
</script>

<style scoped>
.seamless-scroll {
  overflow: hidden;
}

.scroll-wrap {
  display: inline-flex;
  white-space: nowrap;
  animation: 15s seamless-scroll infinite linear;
}

@keyframes seamless-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
</style>

上記のコードでは、SeamlessScroll という名前の Vue コンポーネントを作成します。コンポーネントのテンプレートには、コンテンツのシームレスなスクロールに対応するために、scroll-wrap と呼ばれる要素が含まれています。マウントされたフック関数では、scroll-wrap 要素の幅を取得し、scrollWidth 変数に保存します。

startScroll メソッドでタイマーが定義されており、30 ミリ秒ごとに、scrollLeft の値が 1 ずつ減らされ、scrollLeft の値に応じてscrollStyle のtransform属性が変更され、スクロール効果が実現されます。コンテンツの最後までスクロールするときは、scrollLeft を 0 にリセットして、シームレスなスクロールを実現します。

さらに、スタイルでは、コンテナのスコープ外のコンテンツを非表示にするために、シームレススクロールクラスのオーバーフロー属性を非表示に設定します。コンテンツを 1 行で表示するには、scroll-wrap クラスの表示属性を inline-flex に設定し、white-space 属性を nowrap に設定します。

最後に、CSS アニメーションを使用して、コンテンツをスクロールするアニメーション効果を実現しました。キーフレームの初期状態と終了状態を設定することにより、左から右へのシームレスなスクロールの効果が得られます。

このコンポーネントを使用してシームレスなスクロール効果を実現するには、親コンポーネントで SeamlessScroll コンポーネントを参照し、その中にスクロールするコンテンツを配置するだけです。例:

<template>
  <seamless-scroll>
    <div class="item">内容1</div>
    <div class="item">内容2</div>
    <div class="item">内容3</div>
  </seamless-scroll>
</template>

<script>
import SeamlessScroll from '@/components/SeamlessScroll.vue';

export default {
  components: {
    SeamlessScroll
  }
};
</script>

<style>
.item {
  width: 200px;
  height: 100px;
  background: gray;
  margin-right: 20px;
}
</style>

上記のコードでは、スクロール コンテンツとして SeamlessScroll コンポーネントのスロットにスタイルを持つ 3 つの div 要素を配置します。

上記の手順により、Vue を使用するだけでシームレスなスクロール効果を実現できます。この方法は、実際のニーズに応じて変更および調整して、さまざまなシナリオや要件を満たすことができます。この記事が皆さんのお役に立てれば幸いです!

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