Realization of digital scrolling effect

The development of the large screen will start next week. The content includes a large digital display area, and the numbers need to be scrolled when they are updated. Take this time to wrap up a single numeric scrolling component

build the basic structure

<div class="box">
  <span class="num">0123456789</span>
</div>

.box {
  height: 82px;
  width: 54px;
  line-height: 82px;
  text-align: center;
  background-color: #149373;
  border-radius: 10px;
  margin-right: 5px;
}
.num {
  font-size: 62px;
}
复制代码

At this point, the resulting effect is

If you want a scrolling effect, you need to change the numbers into a vertical arrangement, so that you can add the effect of moving up and down. At this time, you need to add two css attributes

writing-mode: vertical-lr;
text-orientation: upright;
复制代码

At this point, it is a bit close to the goal, and then all we need to do is to change the position of the string so that the corresponding number appears in the box. To change the position, we can make the span become absolute positioning, and then operate it through transform

.box {
  height: 82px;
  width: 54px;
  line-height: 82px;
  text-align: center;
  background-color: #149373;
  border-radius: 10px;
  margin-right: 5px;

  position: relative;
  writing-mode: vertical-lr;
  text-orientation: upright;
}
.num {
  position: absolute;
  left: 50%;
  top: 10px;
  font-size: 62px;
  transform: translate(-50%, 0);
}
复制代码

At this time, when you set translate(-50%, 0), exactly 0 is in the box, if you set translate(-50%, -50%), it should be 5 in the box

In the future, we only need to change the translate setting in the transform to realize different numbers appearing in the box. We need to encapsulate it into a general component, which is to receive the number passed in from the outside, and then set the translate to achieve a general effect. At this time, we can use the The transform is placed in our style. Add another animation, transition: all 0.5s;

<template>
  <div class="box">
    <span class="num" :style="`transform: translate(-50%, -${number * 10}%)`">0123456789</span>
  </div>
</template>

<script setup lang="ts">
defineProps({
  number: {
    type: Number,
    default: 5,
    required: true,
  },
});
</script>
复制代码

At this time, the effect of text scrolling is almost achieved. At this time, you only need to add overflow: hidden under the box class to hide the excess part, and then the digital scrolling effect is achieved. The effect is like

This is a simple package, the following is the complete code. Take this to make a simple record, and hope that everyone can discuss and share other implementation solutions.

<template>
  <div class="box">
    <span class="num" :style="`transform: translate(-50%, -${number * 10}%)`">0123456789</span>
  </div>
</template>

<script setup lang="ts">
defineProps({
  number: {
    type: Number,
    default: 5,
    required: true,
  },
});
</script>

<style lang="less" scoped>
.box {
  height: 82px;
  width: 54px;
  line-height: 82px;
  text-align: center;
  background-color: #149373;
  border-radius: 10px;
  overflow: hidden;
  margin-right: 5px;

  position: relative;
  writing-mode: vertical-lr;
  text-orientation: upright;
}
.num {
  position: absolute;
  left: 50%;
  top: 10px;
  font-size: 62px;
  color: #ffffff;
  transition: all 1.5s;
}
</style>

复制代码