css 数字滚动效果

先看效果图

一、前置条件

首先了解两个css字符排版的样式

1. `writing-mode`

设置文本行是水平还是垂直布局

horizontal-tb：默认值，表示水平排版，从上到下
vertical-lr：表示垂直排版，从左到右
vertical-rl：表示垂直排版，从右到左

2. `text-orientation`

设定行中字符的方向，仅影响纵向模式（当 writing-mode 的值不是horizontal-tb）下的文本。此属性在控制使用竖排文字的语言的显示上很有作用，也可以用来构建垂直的表格头

mixed：默认值，顺时针旋转水平书写的字符 90°，将垂直书写的文字自然布局
upright：将水平书写的字符自然布局（直排），包括垂直书写的文字
sideways：所有字符被布局为与水平方式一样，但是整行文本被顺时针旋转 90°

二、滚动原理

为了效果明显，我们给父元素添加边框作为可视区域，纵向的数字通过transform在Y轴位移达到滚动效果

    <template><div class="number"><span>0123456879</span></div></template><style scoped>.number {width: 20px;height: 20px;border: 1px solid #333;}.number span {writing-mode: vertical-rl;text-orientation: upright;transform: translateY(0%);}</style>

如下图所示

我们接着把边框去掉，换成overflow: hidden

假如现在有一个6位数字123456，我们想要它从000000滚动到目标数字123456

代码部分：

<template><div style="margin-left: 300px;margin-top: 300px;display: flex;align-items: center;"><div v-for="(item, index) in numberList" :key="index" style="display: flex;"><div class="number"><span ref="numberItem" :data-number="item" :data-index="index">0123456879</span></div></div><a-button style="margin-left: 30px;" @click="setNumberTransform">滚动</a-button></div>
</template><script>
export default {computed: {numberList() {return String(this.value).split("");}},data() {return {value: 123456};},methods: {// 设置每一位数字的偏移setNumberTransform() {let numberItems = this.$refs.numberItem;let obj = {}Array.from(numberItems).forEach(c => {let key = c.dataset.indexlet value = c.dataset.numberlet init = 0obj[key] = setInterval(() => {if (init < value * 10) {init++c.style.transform = `translateY(-${init}%)`;} else {clearInterval(obj[key])obj[key] = null}}, 10);  // 控制滚动速率});}},
};
</script><style scoped lang="less">
.number {width: 20px;height: 20px;border: 1px solid #ccc;> span {writing-mode: vertical-rl;text-orientation: upright;transform: translateY(0%);}
}
</style>

效果如下：

我们接着把边框去掉，换成overflow: hidden，效果如下：

三、封装数字滚动组件

创建scroll-number.vue数字滚动组件

<template><div style="display: flex;"><div v-for="(item, index) in numberList" :key="index" style="display: flex;"><span v-if="isNaN(item)">{{item}}</span><div class="number" v-else><spanclass="number-item"ref="numberItem":data-number="item":data-index="index">0123456879</span></div></div></div>
</template><script>
export default {props: {value: {type: [String, Number],default: 0}},watch: {value(newVal) {if (newVal) {this.$nextTick(() => {this.setNumberTransform();});}}},computed: {numberList() {return String(this.value).split("");}},data() {return {};},methods: {// 设置每一位数字的偏移setNumberTransform() {let numberItems = this.$refs.numberItem;let obj = {};Array.from(numberItems).forEach(c => {let key = c.dataset.index;let value = c.dataset.number;let init = 0;obj[key] = setInterval(() => {if (init < value * 10) {init += 1;c.style.transform = `translateY(-${init}%)`;} else {clearInterval(obj[key]);obj[key] = null;}}, 10);});}},mounted() {this.setNumberTransform();}
};
</script><style scoped lang="less">
.number {width: 20px;height: 20px;overflow: hidden;> span {writing-mode: vertical-rl;text-orientation: upright;transform: translateY(0%);}
}
</style>

使用改组件

 <scroll-number :value="'412,789,123,41.00'"></scroll-number>

效果如下图

css 数字滚动效果相关推荐

html数字自动滚动代码怎么写,你可能需要这样的大屏数字滚动效果
大屏数字滚动效果来源于最近工作中一张大屏的UI图,该UI图上有一个模块需要有数字往上翻动的效果,以下是最终实现的效果: 思路在实现此效果之前,我们先来捋一下思路,用思维导图来设计一下我们的实现步骤, ...
初级开发者福音：手把手教你实现数字滚动效果~
文章目录一.前言二.背景知识三.实现方案 Step 1:分析需求 Step 2:实现单个数字的滚动效果 Step 3:组件接口设计 Step 4:完善组件一.前言前端数字滚动显示的场景很多, ...
vue数字滚动效果组件
数字滚动变化效果组件效果预览体验地址用途大屏展示,数字滚动效果实现使用js控制元素移动. 关键代码如下: //修改 chang(oldVal,newVal,id){if(oldVal & ...
js、jQuery实现数字滚动效果
一.效果(监听页面滚动使得超过屏幕的数字每次出现都有数字滚动效果) 二.代码在滚动数字的标签上加上类名counter <div class="about_right flex5&qu ...
CSS3简单实现，数字滚动效果
之前项目要做一个数字滚动效果. 因为需要一直滚动且过一段时间就要滚动,网上早的不太满足,而且为0也滚动,用css+jq写了一下. 首先每一个数字拆成单个数字. 我这边9个数字,根据自己需要添加. /* ...
【网站】数字滚动效果的实现方法
代码如下: HTML部分: <div class="box Counter"><ul class="clearfix"><li&g ...
vue实现数字滚动效果
vue实现数字滚动效果 npm 下载 vue-count-to https://npmmirror.com/package/vue-count-to
html 点击后上下滚动效果,css 上下滚动效果
.scroll{ overflow:hidden; width:100%; } .scrollout{ height:250px; width:100%; overflow:hidden; curso ...
jQuery数字滚动效果
jQuery数字滚动效果## 引入jQuery <script src="js/jquery.min.js"></script> body <div ...

css 数字滚动效果

先看效果图

一、前置条件

1. `writing-mode`

2. `text-orientation`

二、滚动原理

三、封装数字滚动组件

css 数字滚动效果相关推荐

最新文章

热门文章

css 数字滚动效果

先看效果图

一、前置条件

1. writing-mode

2. text-orientation

二、滚动原理

三、封装数字滚动组件

css 数字滚动效果相关推荐

最新文章

热门文章

1. `writing-mode`

2. `text-orientation`