зареждане на анимация при скролване

V

viper1

Member
имам следния анимиран работещ брояч в codepen:

https://codepen.io/viper1/pen/WLbovx

Интересува ме обаче как да започне анимирането на отброяването, чак когато се скролне надолу до него, а не със зареждането на страницата?
 
виждам, че може , но с java мен ме няма никакъв незнам как да го поместа правилно при моя код
 
ето това е моя скрипт

<script type="text/javascript">

$(document).ready(function () {
var dataval = parseInt($('.progress').attr("data-amount"));
if (dataval < 100) {
$('.progress .amount').css("width", 0 + dataval + "%");
}



function modifyProgressVal(type) {
dataval = parseInt($('.progress').attr("data-amount"));
if (type == 1) dataval = Math.min(100,dataval + 10)
else if (type == -1) dataval = Math.max(0,dataval - 10);
$('.progress .amount').css("width", 100 - dataval + "%");
$('.progress').attr("data-amount", dataval);
}
});

</script>


а този div зарежда скрипта:

<div class="progress" data-amount="65 % Sure">
<div class="amount"></div>
</div>

И как да го направя да започне анимирането чак при скролване надолу до него незнам
 
Просто замени всичкия JS със този от линка или:
HTML: 
var is_scrolled = false;       
$(window).scroll(function() {
    var dp = $('.progress').offset().top,
      wS = $(this).scrollTop();       
      if(wS >= (dp - 200) && is_scrolled == false) {
        is_scrolled = true;
        var dataval = parseInt($('.progress').attr("data-amount"));
        if (dataval < 100) {
            $('.progress .amount').css("width", 0 + dataval + "%");
        }
      } 
});
 
да получи се благодаря, но виждам че трябва да скролна на повече от половината екран, за да почне зареждането на анимацията, но пак е нещо.
иначе съм виждал както се скролне малко да докосне екрана до div-а и почва да анимира.
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Горе