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

Дискусията в 'Webmaster Help - Секцията на Експертите' стартирана от viper1, Дек 10, 2018.

Тагове:
  1. viper1

    viper1 Member

    Рег.:
    Май 14, 2013
    Съобщения:
    55
    Харесвания:
    0
    Точки:
    6
    имам следния анимиран работещ брояч в codepen:

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

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

    хейтър Active Member

    Рег.:
    Авг 23, 2014
    Съобщения:
    312
    Харесвания:
    97
    Точки:
    28
  3. viper1

    viper1 Member

    Рег.:
    Май 14, 2013
    Съобщения:
    55
    Харесвания:
    0
    Точки:
    6
    виждам, че може , но с java мен ме няма никакъв незнам как да го поместа правилно при моя код
     
  4. хейтър

    хейтър Active Member

    Рег.:
    Авг 23, 2014
    Съобщения:
    312
    Харесвания:
    97
    Точки:
    28
  5. viper1

    viper1 Member

    Рег.:
    Май 14, 2013
    Съобщения:
    55
    Харесвания:
    0
    Точки:
    6
    ето това е моя скрипт

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

    И как да го направя да започне анимирането чак при скролване надолу до него незнам
     
  6. хейтър

    хейтър Active Member

    Рег.:
    Авг 23, 2014
    Съобщения:
    312
    Харесвания:
    97
    Точки:
    28
    Просто замени всичкия 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 + "%");
            }
          } 
    });
     
  7. viper1

    viper1 Member

    Рег.:
    Май 14, 2013
    Съобщения:
    55
    Харесвания:
    0
    Точки:
    6
    да получи се благодаря, но виждам че трябва да скролна на повече от половината екран, за да почне зареждането на анимацията, но пак е нещо.
    иначе съм виждал както се скролне малко да докосне екрана до div-а и почва да анимира.
     
  8. хейтър

    хейтър Active Member

    Рег.:
    Авг 23, 2014
    Съобщения:
    312
    Харесвания:
    97
    Точки:
    28
    if(wS >= (dp - 200) && is_scrolled == false) {

    може да се заиграеш с стойността тук
     
  9. viper1

    viper1 Member

    Рег.:
    Май 14, 2013
    Съобщения:
    55
    Харесвания:
    0
    Точки:
    6
    да тъкмо се сетих оправих го така if(wS >= (dp - 800)
     
  10. viper1

    viper1 Member

    Рег.:
    Май 14, 2013
    Съобщения:
    55
    Харесвания:
    0
    Точки:
    6
    имаш ли пейпол или скрил да почерпа
     
  11. хейтър

    хейтър Active Member

    Рег.:
    Авг 23, 2014
    Съобщения:
    312
    Харесвания:
    97
    Точки:
    28
    Имам пейпал ама съм го скрил :D
    Пий една бира вместо мен довечера.
     

Сподели страницата

  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies.
    Dismiss Notice