当用户滚动并到达 div 时使数字动画

Question

我有一个简单的 jQuery 代码可以完美运行（我想保留）。问题是这个动画在页面下方的一个部分中，它在页面加载时开始运行ning。我需要这个动画（数字从 0 和运行开始，直到我在 div 中输入的数字）仅在用户滚动并到达 div 时发生。我在 google 和 Whosebug 上进行了搜索，但我发现的解决方案不起作用或需要插件（我不想使用）。

这是我目前拥有的演示代码： https://jsfiddle.net/aj7Lk2bw/2/

jQuery 是：

    $('.value').each(function () {
    $(this).prop('Counter',0).animate({
        Counter: $(this).text()
    }, {
        duration: 4000,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });
});

Answer 1

看看这是不是你想要的：https://jsfiddle.net/aj7Lk2bw/19/

$(window).scroll(testScroll);
var viewed = false;

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 testScroll() {
  if (isScrolledIntoView($(".numbers")) && !viewed) {
      viewed = true;
      $('.value').each(function () {
      $(this).prop('Counter',0).animate({
          Counter: $(this).text()
      }, {
          duration: 4000,
          easing: 'swing',
          step: function (now) {
              $(this).text(Math.ceil(now));
          }
      });
    });
  }
}

在这里找到方法：Run script when div is visible in browser window

Answer 2

这是一个可能的解决方案：

var section = document.querySelector('.numbers');
var hasEntered = false;

window.addEventListener('scroll', (e) => {
    var shouldAnimate = (window.scrollY + window.innerHeight) >= section.offsetTop;

    if (shouldAnimate && !hasEntered) {
    hasEntered = true;

    $('.value').each(function () {
        $(this).prop('Counter',0).animate({
        Counter: $(this).text()
        }, {
        duration: 4000,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
        });
    });

  }
});

变量section是你带数字的蓝色部分，hasEntered是不重复动画。

如果 window 滚动条高于该部分的位置，它就会动画化！

Fiddle: https://jsfiddle.net/aj7Lk2bw/18/

Answer 3

在这里我可以再分享一个例子。

你可以试试 HTML:

$(window).scroll(testScroll);
var viewed = false;

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 testScroll() {
  if (isScrolledIntoView($(".number")) && !viewed) {
      viewed = true;
      $('.value').each(function () {
      $(this).prop('Counter',0).animate({
          Counter: $(this).text()
      }, {
          duration: 4000,
          easing: 'swing',
          step: function (now) {
              $(this).text(Math.ceil(now));
          }
      });
    });
  }
}

<div class="number">
                    
                             <div class="value-wrap">
                    <div class="value" akhi="">51</div>
                    <h4>YEARS IN BUSINESS</h4>
                </div>
               
                             <div class="value-wrap">
                    <div class="value" akhi="">29</div>
                    <h4>WORLDWIDE CERTIFICATION</h4>
                </div>
               
                             <div class="value-wrap">
                    <div class="value" akhi="">58</div>
                    <h4>COUNTRIES REPRESENTED</h4>
                </div>
               
                             <div class="value-wrap">
                    <div class="value" akhi="">6</div>
                    <h4>CONTINENT REPRESENTED</h4>
                </div>
  </div>

当用户滚动并到达 div 时使数字动画

Make numbers animate when user scrolls and reach a div

html

javascript

jquery

counter

jquery-animate