You may need a large-screen digital scrolling effect like this

The large-screen digital scrolling effect comes from a large-screen UI diagram in recent work. There is a module on the UI diagram that needs to have the effect of numbers flipping up. The following is the final effect achieved:

Ideas

Before achieving this effect, let's sort out our ideas and use a mind map to design our implementation steps, as follows:

Initial Implementation

You can inspect elements and download digital background images

With the above design process, let's first implement it simply

html structure

<div class="box">
  <p class="box-item">
    <span>1</span>
  </p>
</div>

Key css

.box-item {
  position: relative;
  display: inline-block;
  width: 54px;
  height: 82px;
  /* Background image */
  background: url(./number-bg.png) no-repeat center center;
  background-size: 100% 100%;
  font-size: 62px;
  line-height: 82px;
  text-align: center;
}

After implementing the above code, its effect will be as follows:

Thinking: After there are numbers in the background box, let's think about it now. The text in the background box must be numbers between 0-9 How to make the numbers scroll without disrupting the above html structure? At this time, our claws reach out to a CSS property: writing-mode . Here is an introduction to its properties:

• horizontal-tb: The default value, indicating horizontal layout, from top to bottom.
• vertical-lr: indicates vertical layout, from left to right.
• vertical-rl: indicates vertical layout, from right to left.

Its real-time effect is as follows:

Based on the above inspiration, we can achieve the following effect:

html changes:

<p class="box-item">
  <span>0123456789</span>
</p>

css changes:

.box-item {
  display: inline-block;
  width: 54px;
  height: 82px;
  background: url(./number-bg.png) no-repeat center center;
  background-size: 100% 100%;
  font-size: 62px;
  line-height: 82px;
  text-align: center;

  /* Newly added code*/
  position: relative;
  writing-mode: vertical-lr;
  text-orientation: upright;
  /* overflow: hidden; */
}
/* Newly added code*/
.box-item span {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  letter-spacing: 10px;
}

Calculate scroll

If we want the number to roll to 5 , how much should it roll to?

The answer is: scroll down -50%

What about the other numbers?

Thanks to our special implementation, there is a general formula for the rolling distance of each digit:

transform: `translate(-50%,-${number * 10}%)`

With the above formula, we let the number roll to 5 , and its effect is as follows:

css changes:

.box-item span {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translate(-50%,-50%);
  letter-spacing: 10px;
}

Implementation of scrolling animation

After knowing the specific rolling distance of each number, let's design it so that the numbers can roll randomly:

The following is the specific random scrolling js

Code:

setInterval(() => {
  let number = document.getElementById('Number')
  let random = getRandomNumber(0,10)
  number.style.transform = `translate(-50%, -${random * 10}%)`
}, 2000)
function getRandomNumber (min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min)
}

So far, our digital scrolling effect has been initially realized. In the next section, we will gradually improve this effect to meet business needs.

Complete

In the previous section, we initially completed the scrolling effect. In this section, we will design a general Vue business component based on the initial mind map.

Accepting Parameters

This component only accepts a number parameter, which we put in props of the Vue component:

props: {
  number: {
    type: Number,
    default: 0
  }
}

Filling

Because of our business needs, our maximum number of digits is 8 , so define a constant:

const MAX_LEN = 8

If the number of digits passed is less than 8 , we need to fill it with 0 After filling it with 0 , we also need to convert it into the format of amount.

Since this part of the code is more common, in order to save space, the code will not be displayed. You can write the relevant js code yourself.

Rendering

We separate the above padding string into character arrays and render them on the page:

computeNumber: is a character array, for example: ['0','0',',','0','0','0',','9','1','7']

html part of the code:

<ul>
  <li
    :class="{'number-item': !isNaN(item) }"
    v-for="(item,index) in computeNumber"
    :key="index"
  >
    <span v-if="!isNaN(item)">
      <i ref="numberItem">0123456789</i>
    </span>
    <span v-else>{{item}}</span>
  </li>
</ul>

css part code:

.number-item {
  width: 50px;
  background: url(./number-bg.png) no-repeat center center;
  background-size:100% 100%;
  & > span {
    position: relative;
    display: inline-block;
    margin-right: 10px;
    width: 100%;
    height: 100%;
    writing-mode: vertical-rl;
    text-orientation: upright;
    overflow: hidden;
    & > i {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%,0);
      transition: transform 0.5s ease-in-out;
      letter-spacing: 10px;
    }
  }
}

Page rendering effect:

Random growth of numbers, simulating polling effect

After the page is rendered, let's make the numbers scroll. We design the following two methods, where increaseNumber needs to be called in the mounted function of Vue lifecycle.

//Timed increase number increaseNumber () {
  let self = this
  this.timer = setInterval(() => {
    self.newNumber = self.newNumber + getRandomNumber(1, 100)
    self.setNumberTransform()
  }, 3000)
},
// Set the offset of each digit setNumberTransform () {
  let numberItems = this.$refs.numberItem
  let numberArr = this.computeNumber.filter(item => !isNaN(item))
  for (let index = 0; index < numberItems.length; index++) {
    let elem = numberItems[index]
    elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`
  }
}

The final effect:

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.