数字动画

  1. 依赖countUp.jsnpm install countup.js ===> countUp.js
  2. angularJs有封装好的指令 npm install countup.js-angular1 ===>angular-countUp.js(依赖countUp.js/angular.js文件)
  3. js中注入 countUpModule 模块,即可使用countUp指令(该指令中已经有封装好的调用countUp.js中的api,实现动画效果)。
  4. 如果需要监听滚动效果可引入基于angularjs的 angular-scroll-spy 库,有首次进入、每次进入、每次滚出三种事件可监听,通过注入scrollSpyModule模块,自定义指令scrollSpy,指定唯一id
$scope.$on('elementFirstScrolledIntoView', function(event, dat) {
  if(data === 'myElementId') {
    //do something
  }
});
<i id="myElementId" count-up start-val="0" end-val="30" scroll-spy-event="elementFirstScrolledIntoView" scroll-spy>
</i>

results matching ""

    No results matching ""