大画面のデジタルスクロール効果を実現する方法

効果：

アイデア：

簡単な説明: 数値を配列に格納します。たとえば、元の数値は 2655 で、変換された配列は [2, 6, 5, 5] です。その後、配列がループされます。各配列は 1 ～ 9 の数値を作成し、その後、配列の値に従って数値の位置を移動します

具体的: Vue で書きましたが、実際には考え方は似ています。

1. 元の数値を配列に変換し、split('') を使用します。

   realTime() {
      return `${this.realTimeNum}`.split('') || 0
    },

2. 元の 4 つの数値をループし、対応するスタイルを書き込みます。各配列は、垂直方向の順序で 0 ～ 9 を生成します。

  <div v-for="(item, index) in this.realTime" :key="index" class="real-time-num" 
          > //外层宽高和内层宽高要一样
            <div class="real-time-num-item">
              <div>0</div>
              <div>1</div>
              <div>2</div>
              <div>3</div>
              <div>4</div>
              <div>5</div>
              <div>6</div>
              <div>7</div>
              <div>8</div>
              <div>9</div>
            </div>
          </div>

================以下是css部分===============
.real-time-num {
  display: inline-block;
  width: 66px;
  height: 98px;
  background:linear-gradient(0deg,rgba(36,97,147,1),rgba(115,157,191,1));
  font-size: 60px;
  margin-left: 3px;
  line-height: 98px;
  text-align: center;
}
.real-time-num>div{
  width: 66px;
  height: 98px;
}

基本的にはこのような効果が得られます。

その後、transform を使用して数値を対応する位置に移動する必要があります: style="{transform: `translateY(-${item*98}px)`}"

<div>滚动效果</div>
          <div v-for="(item, index) in this.realTime" :key="index" class="real-time-num"
          >
            <div class="real-time-num-item" :style="{transform: `translateY(-${item*98}px)`}">
              <div>0</div>
              <div>1</div>
              <div>2</div>
              <div>3</div>
              <div>4</div>
              <div>5</div>
              <div>6</div>
              <div>7</div>
              <div>8</div>
              <div>9</div>
            </div>
          </div>

得られる効果

次に、トランジションエフェクトを追加して変形します

.real-time-num-item{
  transition: all 1s ease-out;
}

次のものが得られます

次に、フレームの外側のコンテンツを非表示にします。

.real-time-num {
  display: inline-block;
  width: 66px;
  height: 98px;
  background:linear-gradient(0deg,rgba(36,97,147,1),rgba(115,157,191,1));
  font-size: 60px;
  margin-left: 3px;
  line-height: 98px;
  text-align: center;
  overflow: hidden; // 隐藏内容
}

最初の効果だけを得る