Question

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

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

除了白色数字之外，我已经能够找出每件作品。真正酷（但棘手）的效果是计数的速度取决于data-count属性加速/减速，即使各部分之间的距离相同。

看起来他们使用waypoints.js来区分各个部分。我搜索了一个可以根据数据输入调整速度的插件，但是我只能找到像countTo.js那样触发然后计数的插件，而不是在用户滚动时连续计数。

任何帮助将不胜感激！

Answer 1

这引起了我的兴趣，所以我试了一下。

据我所知，waypoints.js仅在元素到达视口边缘时触发。我不认为你可以用它来做这种事情，因为你需要不断更新你的柜台。所以我写了这个没有任何jQuery插件。

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

＆＃13;

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);
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

用滚动连续计数，速度变化

1 个答案: