javascript - Counting continusly with scroll, speed varies -

my boss asked me mimic site:

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

i've been able figure out every piece except white numbers. cool (but tricky) effect speed of count accelerates/decelerates depending on data-count attribute, though distance between sections same.

it looks used waypoints.js differentiate between sections. searched plug-in adjust speed depending on data inputs, find ones countto.js trigger count, rather continuously count , down user scrolls.

any appreciated!

this intrigued me, gave shot.

as far know, waypoints.js fires when element hits edge of viewport. don't think use kind of thing, because need continually update counter. wrote without jquery plugin.

disclaimer: code may or may not work you, either way, please regard nothing more sketch of solution, still needs improved in several places used production site.

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 need incremwent our counter? set 0 last element, in case      // adding count text, gets displayed    $(this).text(start);      //store increment , offset, need in our scrolllistener    $(this).data({      increment: increment,      offset: offset    });  });    $(document).on('scroll', function() {    var scrollpos = $(window).scrolltop(),      elementscrollpos,      counter;      //check if scrolled next element    if (current.next().data('offset') < scrollpos) {      current = current.next();    } else if (current.data('offset') > scrollpos) {      current = current.prev();    }      //calculate 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>