当前位置:网站首页>Digital scrolling increases effect
Digital scrolling increases effect
2022-07-07 02:39:00 【Xiao_ Maple】
Effect demonstration
Video demo
Logical thinking
For example, the final number we want to show is 5878390 , Then the first number is from 1 Scroll to 5 stop it , The second number is from 0 Scroll to 5 Scroll to 8 stop it , The third number is from 0 Scroll to 8 Scroll to 7 stop it (9 And then 0), That is to say, each bit from left to right scrolls longer than the previous one , In this way, the number appears in turn from left to right .
Code implementation
Generate the array we need
For each digit, we need to generate the corresponding array .
this.num = '5878390'.split('');
let numArr = [];
this.num.map((item,index) => {
numArr[index] = [];
let i = 0;
// If it's not the first cycle , Add the last generated array
if(index != 0){
numArr[index] = numArr[index].concat(numArr[index - 1]);
// Assign the last value of the array to i
i = numArr[index1].pop();
}
while(i != item){
numArr[index].push(i);
i++;
// The remainder here is for i be equal to 10 Reset to 0
i = i % 10;
}
// Because the judgment is i It's not equal to item, So finally we put item Add in
numArr[index].push(item);
})
this.numArr = numArr;
The resulting array should look like this
html Code
In the code numArr[indexNum].length - 1 and index == 0 ? 0 : 33 It's all about transform: translateY(-100%); Show the content correctly , What you don't understand here can be debugged in the browser css I understand. .
<div class="nums">
<div v-for="(itemNum, indexNum) in num" :key="indexNum">
// Here, different animation times are set by the current subscript , Set the height according to the array length of the current number ,
<div
:style="{ height: numArr[indexNum].length - 1 + '00%', animationDuration: indexNum / 10 + 0.5 + 's' }">
<div v-for="(item, index) in numArr[indexNum]" :key="index"
:style="{ height: index == 0 ? 0 : 33 + 'px' }">
{
{ item }}
</div>
</div>
</div>
</div>
css Code
.nums {
font-size: 26px;
font-weight: bold;
color: #FFFFFF;
line-height: 33px;
letter-spacing: 1px;
text-shadow: 0px 1px 6px #159AFF;
display: flex;
>div {
height: 33px;
overflow: hidden;
display: flex;
>div {
display: flex;
flex-direction: column-reverse;
animation: numIncrease 1s linear 1.3s;
animation-fill-mode: forwards;
transform: translateY(-100%);
>div {
height: 33px;
text-align: right;
}
}
}
}
@keyframes numIncrease {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(0%);
}
}
边栏推荐
- MySQL
- 3 -- Xintang nuc980 kernel supports JFFS2, JFFS2 file system production, kernel mount JFFS2, uboot network port settings, and uboot supports TFTP
- C # / vb. Net supprime le filigrane d'un document word
- The so-called consumer Internet only matches and connects industry information, and does not change the industry itself
- B站6月榜单丨飞瓜数据UP主成长排行榜(哔哩哔哩平台)发布!
- Apifox, is your API interface document rolled up like this?
- 豆瓣平均 9.x,分布式领域的 5 本神书!
- KYSL 海康摄像头 8247 h9 isapi测试
- fasterxml ToStringSerializerBase报错
- PCL 常用拟合模型及使用方法
猜你喜欢
随机推荐
B站6月榜单丨飞瓜数据UP主成长排行榜(哔哩哔哩平台)发布!
C#/VB. Net to delete watermarks in word documents
MetaForce原力元宇宙佛萨奇2.0智能合约系统开发(源码部署)
Web3的先锋兵:虚拟人
C#/VB.NET 删除Word文档中的水印
人脸识别应用解析
Wireshark installation
豆瓣平均 9.x,分布式领域的 5 本神书!
GEE升级,可以实现一件run tasks
Gee upgrade can realize one piece of run tasks
真实项目,用微信小程序开门编码实现(完结)
leetcode:5. 最长回文子串【dp + 抓着超时的尾巴】
MySQL --- 常用函数 - 字符串函数
如何设计好接口测试用例?教你几个小技巧,轻松稿定
S120驱动器基本调试步骤总结
[server data recovery] data recovery case of a Dell server crash caused by raid damage
[leetcode]Search for a Range
慧通编程入门课程 - 2A闯关
MFC Windows 程序设计[147]之ODBC数据库连接(附源码)
Integerset of PostgreSQL