使用waypoints.js

时间:2018-06-04 15:47:57

标签: javascript

希望有人可以提供帮助,我想结合两个脚本,但不确定如何做到这一点。

我已经嵌入了下面的代码,它显示了一个有效的演示。

当ID为Waypoints.js的{​​{1}}进入视口时,

ul会向控制台日志输出消息。

如果此事件可以触发#stats,我会很整洁。



countUp.js

//Waypoint script
var inview = new Waypoint.Inview({
  element: $('#stats')[0],
  enter: function(direction) {
    console.log('Scrolled to waypoint!')
  }
});


//Counter script
$('.counter').each(function() {
  var $this = $(this),
    countTo = $this.attr('data-count');
  $({
    countNum: $this.text()
  }).animate({
    countNum: countTo
  }, {
    duration: 10000,
    easing: 'linear',
    step: function() {
      $this.text(Math.floor(this.countNum));
    },
    complete: function() {
      $this.text(this.countNum);
      //console.log('Counter complete')
    }
  });
});

ul {
  background: #eeeeee;
  padding: 32px;
  display: flex;
  list-style: none;
}

li {
  padding: 16px;
}

.stat-number {
  font-size: 30px;
  color: red;
}




0 个答案:

没有答案