#JS 数字滚动累加动画插件

数字滚动累加动画插件  NumScroll

1.使用前先引入jquery
2.前端学习群:739574382

下载地址

https://github.com/chaorenzeng/jquery.numscroll.js.git

快速使用

1.引入jquery和jquery.numscroll.js

<script src=‘http://code.jquery.com/jquery-2.1.1.min.js‘ type=‘text/javascript‘></script>
<script src="js/jquery.numscroll.js" type="text/javascript" charset="utf-8"></script>

2.拷贝以下布局结构

<span class="num">888888</span>

3.创建numscroll对象:

$(".num").numScroll();

API文档

可选参数 默认值 说明
time 1500 滚动总时长
delay 0 延迟启动时长

案例展示

原文地址:https://www.cnblogs.com/KevinTseng/p/9690139.html

时间: 2024-10-20 09:31:09

#JS 数字滚动累加动画插件的相关文章

scrollreveal(页面滚动显示动画插件支持手机)

scrollreveal.js是一款可以轻易实现桌面和移动浏览器元素随页面滚动产生动画的js插件.该插件通过配置可以在页面滚动,元素进入视口时产生炫酷的动画效果,同时还支持元素的3D效果,非常的实用. 安装 可以通过npm或bower来安装scrollreveal.js插件. 1 2 npm install scrollreveal bower install scrollreveal                基本使用方法 HTML结构: 1 2 3 <!-- HTML --> <

15款fullpage.js鼠标滚动页面动画展示特效

jquery全屏鼠标滚动切换fullpage页面模板下载 html5响应式页面滚动背景图片动画特效 酷炫html5 css3全屏滚动动画专题模板 html5腾讯互动娱乐网站鼠标滚动展示模板 html5平安儿童手表页面滚动简约单页模板 html5叮咚手机app下载页面滚动展示特效 jquery fullPage证券股票软件页面滚屏动画特效 jquery.fullpage.js360安全路由全屏页面滚动效果 html5新年快乐医院专题页介绍模板下载 html5雷锋wifi软件介绍页面下滑滚动式特效

ScrollReveal-元素随页面滚动产生动画的js插件

简介 和 WOW.js 一样,scrollReveal.js 也是一款页面滚动显示动画的 JavaScript,能让页面更加有趣,更吸引用户眼球.不同的是 WOW.js 的动画只播放一次,而 scrollReveal.js 的动画可以播放一次或无限次:WOW.js 依赖 animate.css,而 scrollReveal.js 不依赖其他任何文件. 虽然 scrollReveal.js 不依赖 animate.css,但它的动画也是用 CSS3 创建的,所以它不支持 IE10 以下的浏览器.

aos.js超赞页面滚动元素动画jQuery动画库

插件描述:aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件.该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果.在页面往回滚动时,元素会恢复到原来的状态. 简要教程 aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件.该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果.在页面往回滚动时,元素会恢复到原来的状态. AOS.js 下载          案例演示 安装 可以通过bower来安装aos动画库插件.

jQuery 数字滚动插件

这几天闲来没事写的,有不对的地方还请多多指点 CSS: .digital-beating { display:inline-block; margin:0; padding:0 2px;} .digital-beating i { display:inline-block; width:17px; height:30px; margin:0; padding:0; background:url(../images/icon_0-9.jpg) no-repeat 0 0; text-align:c

分享JQuery动画插件Velocity.js的六种列表加载特效

分享JQuery动画插件Velocity.js的六种列表加载特效.在这款实例中给中六种不同的列表加载效果.分别为从上飞入.从右侧飞入.从左侧飞入.和渐显.一起看下效果图: 在线预览   源码下载 实现的代码. html代码: <h1> Velocity.js <i>slice + sequence</i></h1> <pre>Only anim X number with FX#1, animate Y number with FX#2 etc

JQuery动画插件Velocity.js发布:更快的动画切换速度

5月3日,Julian在其GitHub上发布了Velocity.js.Velocity.js是一款动画切换的jQuery插件,它重新实现了jQuery的$.animate()方法从而加快动画切换的速度.Velocity.js只有7k的大小,它不仅包含了$.animate()的所有功能,并且还包含了颜色切换.转换(transform).循环.缓动.CSS切换.Scroll功能,它是jQuery. jQuery UI.CSS变换 在动画方面的最佳组合.Velocity.js支持IE8+.Chrome

分享一个实用插件(页面滚动触发动画)以及其内部的所有动画属性值

个人不太擅长实用JQuery插件,比较喜欢使用原生JS代码,但是制作网站时的难度很大. 今天推荐一个比较实用的插件 地址为: http://www.htmleaf.com/jQuery/Layout-Interface/201704274479.html         <link rel="stylesheet" href="css/animate.min.css">        <script type="text/javascri

JS鼠标滚动插件scrollpath使用介绍

JS鼠标滚动插件scrollpath:在这个插件中首先要引人的JS是jQuery,因为后面的JS都是基于它的.再者需要引入的是jquery.scrollpath.js.scrollpath.css还有你自己的JS和CSS. prefixfree.min.js和jquery.easing.js可以根据实际情况自己选择. 首先编写好HTML,在一个绝对定位块中分别布好每个块的位置 然后开始根据位置用JS画路径. 定义路径: $.fn.scrollPath("getPath") .moveT