Question

我有一个值为1-20的值计数器。问题是它在页面加载/刷新时开始计数。所以观众无法看到动画计数。当访问者到达特定部分时，我如何开始计算（部分ID =计数器）。

HTML

<section id=counter>
 <div id="talkbubble""><span class="count">20</span></div>
</section>

CSS

.count
 {line-height: 100px;color:white;margin-left:30px;font-size:25px;}
#talkbubble {width: 120px;height:80px;background: red;position: relative;  -moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px; float:left; margin:20px;}
 #talkbubble:before {content:"";position: absolute;right: 100%;top: 26px; idth: 0;height: 0;border-top: 13px solid transparent;border-right: 26px solid red;border-bottom: 13px solid transparent;}

jquery的

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

Answer 1

试试这个：

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

DEMO HERE

Answer 2

您可以使用滚动事件来不断检查该部分当前是否在视图中，这取决于您希望动画何时开始的偏好。

执行此操作时，您必须向元素添加一些内容，表示动画已经启动，并且只有在之前尚未触发动画时才启动动画。

$(window).on('scroll', function(e) {
  if ($(window).scrollTop() >= ($("#counter").offset().top - ($(window).height()))) {
    if (!$("#counter").hasClass("animated")) {
      $('.count').each(function() {
        $(this).prop('Counter', 0).animate({
          Counter: $(this).text()
        }, {
          duration: 4000,
          easing: 'swing',
          step: function(now) {
            $(this).text(Math.ceil(now));
          }
        });
      });
      $("#triggered").addClass("show");
      $("#counter").addClass("animated");
    }
  }
});

.count {
  line-height: 100px;
  color: white;
  margin-left: 30px;
  font-size: 25px;
}
#talkbubble {
  width: 120px;
  height: 80px;
  background: red;
  position: relative;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  float: left;
  margin: 20px;
}
#talkbubble:before {
  content: "";
  position: absolute;
  right: 100%;
  top: 26px;
  idth: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-right: 26px solid red;
  border-bottom: 13px solid transparent;
}
#counter:after {
  content: "";
  display: block;
  clear: both;
}
#filler {
  height: 1000px;
}
#triggered {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  background-color: rgba(0, 255, 0, .6);
  padding: 10px;
  border-radius: 5px;
  opacity: 0.75;
}
#triggered.show {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="filler"><h1>Scroll down &darr;</h1></div>
<section id="counter">
  <div id="talkbubble"><span class="count">20</span>
  </div>
</section>
<div id="triggered">TRIGGERED</div>

Answer 3

在scroll上，查看#counter的顶部是否在视口中。

$(window).on('scroll', function() {
  var st = $(this).scrollTop(),
    vh = $(this).height(),
    $counter = $('#counter'),
    ct = $counter.offset().top;
  if ((st + vh) > ct) {
    // #counter is in the viewport
    $('.count').each(function() {
      $(this).prop('Counter', 0).animate({
        Counter: $(this).text()
      }, {
        duration: 4000,
        easing: 'swing',
        step: function(now) {
          $(this).text(Math.ceil(now));
        }
      });
    });
  }
})

在特定的html部分开始活动

3 个答案: