javascript - Trigger jQuery animated number counter on window scroll -
i'm trying jquery animated counter trigger user scrolls more 200 pixels down page:
original jquery code here
$('.count').each(function () { var $this = $(this); jquery({ counter: 0 }).animate({ counter: $this.text() }, { duration: 1000, easing: 'swing', step: function () { $this.text(math.ceil(this.counter)); } }); });
i've tried wrap in following jquery doesn't trigger animation until end:
$(window).scroll(function() { if ($(window).scrolltop() > 200) { $('.count').each(function () { var $this = $(this); jquery({ counter: 0 }).animate({ counter: $this.text() }, { duration: 1000, easing: 'swing', step: function () { $this.text(math.ceil(this.counter)); } }); }); } });
html:
<span class="count">100</span> <br/> <span class="count">200</span> <br/> <span class="count">300</span>
the fiddle other post here
what best way trigger jquery counter user scrolls view or 200 pixels down page? i've tried jquery wayfinder not had luck making work.
unbind scroll handler (with $(window).off("scroll")
) before triggering animation prevent animation restarting if user continues scroll.
$(window).scroll(startcounter); function startcounter() { if ($(window).scrolltop() > 200) { $(window).off("scroll", startcounter); $('.count').each(function () { var $this = $(this); jquery({ counter: 0 }).animate({ counter: $this.text() }, { duration: 1000, easing: 'swing', step: function () { $this.text(math.ceil(this.counter)); } }); }); } }
body { font-family: sans-serif; height: 300vh; } .count { position: fixed; top: 8px; left: 8px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="count">100</div>
Comments
Post a Comment