How to achieve large-screen digital scrolling effect

Effect:

Idea:

Brief description: Store the numbers in an array. For example, the original number is 2655, and the converted array is [2, 6, 5, 5]. Then the array is looped, and each array creates numbers 1-9, and then according to the value of the array to move the position of the numbers

Specific: I wrote it in Vue, but in fact the idea is similar.

1. Convert the original number to an array, use split('')

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

2. Loop through the original four numbers, and then write the corresponding styles. Each array generates 0-9 in vertical order.

  <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;
}

Basically, effects like this can be achieved.

After that, we need to use transform to move the number to the corresponding position: 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>

the effect obtained

Then we add a transition effect to transform

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

You will get the following

Then just hide the content outside the frame.

.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; // 隐藏内容
}

Just get the effect of the beginning