Запускайте анимацию при прокрутке в видимой области окна просмотра (и не останавливайтесь при прокрутке) - PullRequest
Новая
       36

Запускайте анимацию при прокрутке в видимой области окна просмотра (и не останавливайтесь при прокрутке)

0 голосов
/ 25 февраля 2019

Я хочу запустить анимацию, когда элемент попадает в видимую область области просмотра.Я нашел решение с некоторой помощью запустить анимацию, но оно останавливается, когда пользователь продолжает прокручивать.(См. Несколько проверок области просмотра на странице )

Мне нужна анимация для запуска, а не для остановки при прокрутке. 

jQuery(function($) {
  function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
  }

  function Utils() {}

  Utils.prototype = {
    constructor: Utils,
    isElementInView: function(element, fullyInView) {
      var pageTop = $(window).scrollTop();
      var pageBottom = pageTop + $(window).height();
      var elementTop = $(element).offset().top;
      var elementBottom = elementTop + $(element).height();

      if (fullyInView === true) {
        return ((pageTop < elementTop) && (pageBottom > elementBottom));
      } else {
        return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
      }
    }
  };

  var Utils = new Utils();

  function checkForVisible() {
    $('.counter').each(function() {
      var $this = $(this),
        countTo = $this.attr('data-count');

      var isElementInView = Utils.isElementInView($this, false);
      if (isElementInView) {
        $({
          countNum: $this.text()
        }).animate({
          countNum: countTo
        }, {
          duration: 2000,
          easing: 'linear',
          step: function() {
            $this.text(Math.floor(this.countNum));
          },
          complete: function() {
            $this.text(this.countNum);
          }
        });
      }
    });
  };

  var ticking = false;

  window.addEventListener('scroll', function(e) {
    if (!ticking) {
      window.requestAnimationFrame(function() {
        checkForVisible();
        ticking = false;
      });
      ticking = true;
    }
  });
});

Вот пример прокруткипроблема: https://codepen.io/cray_code/pen/ywBEzX

...