Вызов счётчика jquery.countTo.js при попадание в область видимости экрана?

#javascript #jquery

Добрый день. Есть js счётчик чисел jquery.countTo.js. При загрузки страницы он вызывается
и сразу запускается, но счётчик находится в средине страницы и при скролле вниз страницы
уже не видно того анимационного эффекта. Как сделать чтобы счётчик сработал только
когда он попадёт в область видимости экрана?

Вызов счётчика сейчас:

(function ($) {

    var o = $('.count');

    if (o.length > 0) {
        include('js/jquery.countTo.js');

        $(document).ready(function () {
            $(o).countTo();
        });
    }
})(jQuery);

    

Ответы

Ответ 1

Есть такой прекрасный плагин WayPoints. Он позволяет запускать произвольный код,
при прокрутке до определенных точек на экране. Попробуйте его. Работает примерно так:

var start = new Waypoint({
  element: document.getElementById('counter_container'),
  handler: function () {
    // запускайте свой счетчик
  }
});


Ответ 2

jquery.onscreen писал когда-то для себя небольшие фильтры

В вашем случае использовать эти фильтры как-то так

function appear() {
if (el.filter(':onscreen').length) {
    el.filter(':onscreen').countTo();
    return;
} 
var time = setTimeout(appear,250);   
};
var el = $('.count');
var time = appear(appear,250)


Так же много всяких разных плагинов для jquery - искать в гугле jquery appear, принцип
работы у всех схожий.


Ответ 3

Всем спасибо за ответы. Немного покумекав и поэкспериментировав, рабочий вариант
получился такой:

(function ($) {
var o = $('.count');
var cc = 1;

if (o.length > 0) {
    include('js/jquery.countTo.js');

    $(window).scroll(function(){
        var targetPos = o.offset().top;
        var winHeight = $(window).height();
        var scrollToElem = targetPos - winHeight;
        var winScrollTop = $(this).scrollTop();

        if (winScrollTop > scrollToElem) {
            if (cc < 2){

                cc = cc + 2;
                $(document).ready(function () {
                    $(o).countTo();
                });
            }
        }
    });
}
})(jQuery);


Проверка 

if (cc < 2){
    cc = cc + 2;
    ....
}


необходима, что-бы при дальнейшей прокрутке страницы счётчик не вызывался снова.


Ответ 4

Забыл добавить функцию

 function include(url) {
    var script = document.createElement('script');
    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
}