滚动不断计数，速度变化

Question

我的老板让我模仿这个网站：

http://mailchimp.com/2013/#by-the-numbers

除了白色数字外，我已经能猜出所有棋子了。真正酷（但棘手）的效果是计数速度 accelerates/decelerates 取决于数据计数属性，即使各部分之间的距离相同。

他们似乎使用 waypoints.js 来区分不同的部分。我搜索了一个可以根据数据输入调整速度的插件，但我只能找到像 countTo.js 这样触发然后计数的插件，而不是随着用户滚动而不断地上下计数。

如有任何帮助，我们将不胜感激！

Answer 1

这让我很感兴趣，所以我试了一下。

据我所知，waypoints.js 仅在元素到达视口边缘时触发。我不认为你可以将它用于这种事情，因为你需要不断更新你的计数器。所以我在没有任何 jQuery 插件的情况下写了这篇文章。

免责声明：此代码可能适合您，也可能不适合您，无论哪种方式，请将其视为解决方案的草图，仍需要在多个地方进行改进才能用于生产站点。

var current = $('.step').first();

$('.step').each(function() {
  var start = $(this).data('count'),
    end = $(this).next().data('count'),
    height = $(this).height(),
    offset = $(this).offset().top,
    increment = end ? height / (end - start) : 0; //after how many pixels of scrolling do we need to incremwent our counter? Set to 0 for last element, just in case

  // just adding the count as text, so it gets displayed
  $(this).text(start);

  //store increment and offset, we need those in our scrollListener
  $(this).data({
    increment: increment,
    offset: offset
  });
});

$(document).on('scroll', function() {
  var scrollpos = $(window).scrollTop(),
    elementscrollpos,
    counter;

  //check if scrolled to the next element
  if (current.next().data('offset') < scrollpos) {
    current = current.next();
  } else if (current.data('offset') > scrollpos) {
    current = current.prev();
  }

  //calculate the current counter value;
  elementscrollpos = scrollpos - current.data('offset');
  counter = Math.floor(current.data('count') + elementscrollpos / current.data('increment'));

  $('.counter').text(counter);
});

body {
  margin: 0;
}
.counter {
  position: fixed;
  top: 0;
  left: 0;
}
.step {
  height: 100vh;
  text-align: center;
  font-size: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div class="counter"></div>
<div class="step" data-count="0"></div>
<div class="step" data-count="1"></div>
<div class="step" data-count="2"></div>
<div class="step" data-count="8"></div>
<div class="step" data-count="100"></div>
<div class="step" data-count="110240"></div>
<div class="step" data-count="110250"></div>

滚动不断计数，速度变化

Counting continusly with scroll, speed varies

javascript

jquery

parallax