Как запустить jQuery анимацию (плагин) при доскролле?

Question

[Максим Кононов]

Подключил плагин для анимации круговых диаграмм (circle progress).
Он запускается сразу после загрузке страницы.

$('#circle1').circleProgress({
  value: 0.80,
  size: 120,
  thickness: 10,
  fill: '#003459',
  emptyFill: 'rgba(255,255,255, .5)'
});

Как реализовать его запуск при доскролле до блока с этими диаграммами?

Answer 1

[alexalexes]

Написал общее решение для вашей задачи, когда необходимо обработать доскроллинг.
Запускайте плагин, когда наступает ситуация "выполнения действия", или выполняйте метод плагина, который перезапускает анимацию.

<style>
#div1
{
  display: block;
  width: 400px;
  height: 1400px;
  background-color: green;
}
#div2
{
  display: block;
  width: 400px;
  height: 400px;
  background-color: red;
}
</style>
<div id="div1">
</div>
<div id="div2">
</div>
<script>
  //Функция для определения необходимости выполнения действия,
//связанное с появлением элемента elem_id в видимой части документа
  function SomethingToDoElem(e, elem_id)
  {
    var elem = document.getElementById(elem_id);
    if(elem === null)
      return;
    //определение размера видимой части документа без JQuery
    var opera = (navigator.userAgent.toLowerCase().indexOf('opera') > -1),
    html = document.documentElement,
    body = document.body,
    w = document.compatMode=='CSS1Compat' && !opera ? html.clientWidth : body.clientWidth,
    h = document.compatMode=='CSS1Compat' && !opera ? html.clientHeight : body.clientHeight;
    // если величина прокрутки по вертикали + видимая высота документа
//превышает расстояние от верха документа до элемента,
    // для которого требуется действие доскроллинга, то выполняем это действие
    if(e.currentTarget.scrollY + h > elem.offsetTop)
    {
      var is_did_something = elem.getAttribute('is_did_something'); // если действие однократного применения,
//то получаем данные о том, что оно не выполнялось ранее, например, с помощью атрибута тега.
      if(is_did_something === null) // атрибут не создан, значит действия не было
      {
        setTimeout(function(){elem.style.backgroundColor = 'blue'; }, 1000); // выполняем действие
        elem.setAttribute('is_did_something', 1); // записываем, что действие выполнили
// для проверки однократности его выполнения
      }
    }
  }
  // Ловим события, для которых возможно понадобиться действие доскроллинга
  
  // на загрузку документа, лучше использовать JQuery аналог
  window.onload = function(e)
  {
    SomethingToDoElem(e, "div2");
  }
  
  // на прокрутку документа
  window.onscroll = function(e)
  {
    SomethingToDoElem(e, "div2");
  }
  
// на изменение размера окна документа, если дизайн резиновый
// и интересуемый элемент div2 может изменять в этом случае свое положение
// при ресайзе окна браузера.
 

// !!!: лучше не привязывать через $().on('resize', ...) криво срабатывает вызов,
// использовать только нативные способы подписки на событие.
  window.onresize = function(e)
  {
    SomethingToDoElem(e, "div2");
  }

// Также нужно вызывать  SomethingToDoElem(e, "div2"); при любом динамическом изменении
// контента страницы или блока, где этот контент расположен.
</script>