Question

我在网站上创建了一个计数器页面，该页面在页面加载时会设置动画，但是我试图在用户进入该部分时触发动画。

当前，我拥有此功能，但是动画仅在div超出导航（即：包括导航的屏幕顶部）时触发。我将如何更改此设置，以便在div可见时触发动画？

我还遇到一个问题，即它显示为不带逗号的完整数字，然后变为0并进行动画处理，如何使它显示为0呢？

我对JS很陌生，因此不胜感激。

这是我拥有的：

const convert = str => {
  // Find the number
  let regx = /(\d{1,3})(\d{3}(?:,|$))/;
  // Set a variable
  let currStr;
  // Start loop
  do {
    // Replace current string, split it
    currStr = (currStr || str.split(`.`)[0])
      .replace(regx, `$1,$2`)
  } while (currStr.match(regx)); // Loop

  // Return our result from function
  return (str.split(`.`)[1]) ?
    currStr.concat(`.`, str.split(`.`)[1]) :
    currStr;
};

$(window).scroll(startCounter);

function startCounter() {
  if ($(window).scrollTop() > $('#counter').offset().top) {
    $(window).off("scroll", startCounter);
    $('.count').each(function() {
      $(this).prop('Counter', 0).animate({
        Counter: $(this).text()
      }, {
        duration: 2000,
        easing: 'swing',
        step: function(now) {
          $(this).text(Math.ceil(now));
          $(this).text(convert($(this).text()))
        }
      });
    });
  }
}

.section-counter {
  margin-top: 150vh;
  margin-bottom: 150vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="section-counter" id="counter">

  <div class="row">
    <h2>Headline Data Figures</h2>
  </div>

  <div class="row">
    <div class="col span-1-of-2">
      <div class="row">
        <div id="shiva"><span class="count">1688019</span>
          <h3>Contributions</h3>
        </div>
      </div>

      <div id="shiva"><span class="count">82150</span>
        <h3>Items of Business</h3>
      </div>

    </div>

    <div class="col span-1-of-2">
      <div class="row">
        <div id="shiva"><span class="count">10505</span>
          <h3>Meetings</h3>
        </div>
      </div>

      <div id="shiva"><span class="count">168260</span>
        <h3>Written&#47;Oral Questions</h3>
      </div>
    </div>
  </div>

  <div class="row arrow-dark arrow__7 animated pulse infinite">
    <i class="ion-md-arrow-dropdown"></i>
  </div>

</section>

Answer 1

如果我理解正确，那么问题是，您正在将div的偏移量与屏幕的 top 进行比较，而实际上您是想找出屏幕底部的位置是，并将其与div的位置进行比较。

关于从0开始，您可以让元素使用data attribute来确定最大值，而不是文本，这样您就可以让元素读0直到它们开始计数：

const convert = str => {
  // Find the number
  let regx = /(\d{1,3})(\d{3}(?:,|$))/;
  // Set a variable
  let currStr;
  // Start loop
  do {
    // Replace current string, split it
    currStr = (currStr || str.split(`.`)[0])
      .replace(regx, `$1,$2`)
  } while (currStr.match(regx)); // Loop

  // Return our result from function
  return (str.split(`.`)[1]) ?
    currStr.concat(`.`, str.split(`.`)[1]) :
    currStr;
};

$(window).scroll(startCounter);

function startCounter() {
  var bottomOfScreen = $(window).scrollTop() + $(window).innerHeight();
  if (bottomOfScreen > $('#counter').offset().top) {
    $(window).off("scroll", startCounter);
    $('.count').each(function() {
      $(this).prop('Counter', 0).animate({
        Counter: $(this).attr('data-max')
      }, {
        duration: 2000,
        easing: 'swing',
        step: function(now) {
          $(this).text(Math.ceil(now));
          $(this).text(convert($(this).text()))
        }
      });
    });
  }
}

.section-counter {
  margin-top: 150vh;
  margin-bottom: 150vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="section-counter" id="counter">

  <div class="row">
    <h2>Headline Data Figures</h2>
  </div>

  <div class="row">
    <div class="col span-1-of-2">
      <div class="row">
        <div id="shiva"><span class="count" data-max="1688019">0</span>
          <h3>Contributions</h3>
        </div>
      </div>

      <div id="shiva"><span class="count" data-max="812150">0</span>
        <h3>Items of Business</h3>
      </div>

    </div>

    <div class="col span-1-of-2">
      <div class="row">
        <div id="shiva"><span class="count" data-max="10505">0</span>
          <h3>Meetings</h3>
        </div>
      </div>

      <div id="shiva"><span class="count" data-max="168260">0</span>
        <h3>Written&#47;Oral Questions</h3>
      </div>
    </div>
  </div>

  <div class="row arrow-dark arrow__7 animated pulse infinite">
    <i class="ion-md-arrow-dropdown"></i>
  </div>

</section>

Answer 2

一旦用户进入某个元素，我将为您提供启动动画的逻辑。

相关的事件触发器是ONMOUSEOVER，因此将其合并...

 <div id="abc" onmouseover="AnimateIt();"></div>

无需赘言，像这样，我们的元素必须在其样式开始时已暂停其动画。

  animation-play-state:paused;

所以要进行动画处理的JavaScript逻辑...

 function AnimateIt(){ abc.style.animationPlayState='running'; }

就是这样。

滚动过去Div的部分时的动画计数器？

2 个答案: