学做网站培训课程介绍

当前位置:

网站数字动画翻滚效果实现方法(指定位置加载)

网站上有很多的数字翻滚效果,可以在页面滚动时,将指定的数字从0开始计数增加动画。该数字动画可以控制动画的延迟时间和动画过渡时间。它依赖于插件来监听滚动事件。

网站数字动画翻滚效果

下面介绍一下这种网站数字动画翻滚效果实现方法。

第一步:下载jquery数字动画翻滚插件

第二步:在自己的网站上引入该插件;


<script src="jquery.waypoints.min.js"></script>
<script src="jquery.countup.min.js"></script>

第三步:使用<span>元素作为数字的容器。


<span class="counter">1981</span>

可以使用data-counter-time和data-counter-delay属性来设置数字动画的动画时间和延迟时间。


<span class="counter" data-counter-time="5000" data-counter-delay="50">1981</span>

第四步:在网页最底部加上以下的代码,来初始化数字动画。


$('.counter').countUp();

也可以在初始化的时候传入配置参数(统一控制速度和延迟时间)。


$('.counter').countUp({
delay: 10,
time: 2000
});

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 网站中经常使用到PHP FOR循环进行数据的调用,来循环显示某个数组或者数据库里的数据,但如果数据很大的情况下,在一页显示非常消耗内存,这时我们可
  • 本文介绍一下ECS云服务器CentOS操作系统如何安装宝塔面板,大致流程为:先远程连接到云服务器,执行宝塔面板安装命令,安装完毕后保存好宝塔登录地址
  • 我们网站上经常会使用到FORM表单来提交信息,有时会被一些无聊的人批量进行恶意提交,影响网站的服务性能。下面介绍一下使用token验证阻止FORM表单恶
  • 有些站长使用Siteground主机建外贸网站,但对于Siteground主机建网站的步骤不是很清楚,下面学做网站论坛就介绍一下Siteground主机建网站的所有步骤。
  • 很多网站都是以展示性为主的普通展示性网站,那么怎么给自己的网站添加购物商城功能呢?下面学做网站论坛就来介绍一下网站添加购物商城功能的方法。
  • 在很多的图片网站上,全使用到3d轮播图效果,可以不断的实现旋转轮播,最大气美观。效果见这里;对于这样一种高大上的3D旋转轮播图,做起来并不是想
  • 宝塔面板有一个看得功能强大但又很鸡肋的功能就是设置授权IP登录,只有授权的IP电脑才可以登录宝塔面板,否则将无法登录。本来是一个非常好提升网站
  • 下面介绍一下手机网站常见的左边弹出导航菜单,并且点击一级分类展开二级分类的功能实现方法。HTML代码:<ul id="topmeau" class=&
  • 网站上经常会有这样的功能,可以让用户点击对应的颜色来对网站进行配色调整。也就是我们所说的更换配色功能。下面介绍一下如何给网站添加更换皮肤配色
  • 网站使用宝塔面板安装后,为了防止网站数据丢失,需要经常进行网站备份。备份网站数据分为备份网站源码和数据库。用户可以在网站后台可以先备份数据