You may need such a large screen digital scrolling effect

Time:2019-12-6

The digital scrolling effect of large screen comes from a large screen UI chart in recent work. There is a module on the UI chart that needs to have the effect of digital scrolling. The following is the final effect:

 

thinking

Before realizing this effect, let’s clear our mind and design our implementation steps with mind map, as follows:

 

Preliminary realization

You can review elements and download digital background images

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

htmlstructure


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

cruxcss

.box-item {
  position: relative;
  display: inline-block;
  width: 54px;
  height: 82px;
  /*Background picture*/
  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: now that there are numbers in the background box, let’s think about it. The text in the background box must be0-9The previous figures should not be confusedhtmlUnder the premise of structure, how to make the numbers roll up? At this time, our claws are extended to oneCSSProperties:writing-mode, the following is an introduction to its properties:

  • Horizontal TB: the default value for horizontal layout, from top to bottom.
  • Vertical LR: vertical layout, from left to right.
  • Vertical RL: vertical layout, from right to left.

Its real-time effect is as follows:

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

htmlChanges:


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

cssChanges:

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

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

Calculated rolling

If we want the numbers to scroll to5, how much is the scroll?

The answer is: scroll down-50%

What about the other numbers?

Thanks to our special implementation method, the rolling distance of each digit has a general formula:


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

With the above formula, let’s scroll the numbers to5, its effect is as follows:

cssChanges:


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

The realization of rolling animation

After knowing the specific rolling distance of each number, let’s design it to let the number roll up randomly:

 

Here is the specific random scrollingjs

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 the business needs.

perfect

In the previous section, we have preliminarily completed the rolling effect. In this section, we will design a general-purpose thinking map based on the initial thinking mapVueBusiness component

Acceptance parameter

This component only accepts one parameter of numeric type, we put it in theVueComponentpropsChina:


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

Patch position

Because of our business needs, our largest number is8Bits, so define a constant:


const MAX_LEN = 8

If the number of transmitted digits is insufficient8We need to make up for it0Operation of0After that, we also need to convert it to the amount format

Because this part of the code is more common, in order to save space, we do not show the code, you can write the relevant JS code yourself.

Rendering

According to the above complement string, we separate it into character array and render in the page:

Computenumber: character array, for example: [‘0 ‘,’ 0 ‘,’,’0 ‘,’ 0 ‘,’, ‘,’9’, ‘1’, ‘7’]

htmlPart 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>

cssPart 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:

 

Digital random growth, analog polling effect

After rendering the page, let’s roll up the numbers and design the following two methodsincreaseNumberNeed toVuelife cyclemountedCall in function

//Timing growth figures
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}%)`
  }
}

Final effect:

The above is the whole content of this article. I hope it will help you in your study, and I hope you can support developepaer more.