在视口中动画计数器 [英] Animate counter when in viewport

查看：107
本文介绍了在视口中动画计数器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个计数器，可以在HTML中定义一个最终数字。不过，我希望这个动画一旦出现在视口中就会发​​生。



我有一个小提琴这里显示了滚动如何影响计数器号码。

  $（document）.ready（function（） {
 $（function（$，win）{
 $ .fn.inViewport = function（cb）{
 return this.each（function（i，el）{
 function （），
 = el.getBoundingClientRect（），
t = r.top，
b = r.bottom; 
 return cb.call（el，Math.max（0，t> 0→H-t：（b } 
 visPx（） ; 
 $（win）.on（resize scroll，visPx）; 
}）; 
}; 
}（jQuery，window））; 
 
 $（。fig-number）。inViewport（function（px）{
 $（this）.each（function（）{
 $（this）.prop（'Counter ，0）.animate（{
 Counter：$（this）.text（）
}，{
 duration：1000，
 
 step：function（now） {
 $（this）.text（Math.ceil（now））; 
} 
}）; 
}）; 
}）; 
}）;

我已经尝试过多种方法，但是看起来并没有达到目标。



 0→H-t：（b

< 100％;}＃upper-push {height：100％;宽度：100％;显示：块;背景：红色;颜色：白色;} 

 < div id =upper -push>向下滚动< / div>< div id =numbers> < span class =fig-number> 25< / span> < span class =fig-number> 78 < / div>

$ b

解决方案

.inViewport（）插件会触发每个滚动事件的回调。

这是设计。 （帮助保持代码中插件的来源！））



在 plugin page 你可以看到如何使用它： 

  $ （selector）。inViewport（function（px）{
 console.log（px）; //`px`表示可见高度的数量
 if（px）{
 //如果元素进入视口，则执行此操作// px> 0 
} else {
 //如果元素退出视口，则执行此操作// px = 0 
} 
}）; //在这里你可以链接其他jQuery方法到你的选择器

表示：


  1. 您必须倾听 px 参数大于 0 （元素在视口中）

  2. 为防止链接附加动画创建堆积，应使用标志变量

  3. （回调中的 $（this）.each（）是不需要的。 ）

编辑过的jsFiddle演示 

  jQuery（function（$）{// DOM ready和$ in 
 $ b $（。fig-number）。inViewport（function（px）{
 // if px> 0（输入V.port）和
 //如果prop initNumAnim标志尚未设置=动画数字
 if（px> 0&< this.initNumAnim）{
 thi s.initNumAnim = true; //将flag设置为true以防止重新运行相同的动画
 //<<<在这里做一些凉爽的东西！ 
} 
}）; 
 
}）;

片段示例： 

  // inViewport jQuery插件// https://stackoverflow.com/a/26831113/383904$(function($,win） {$ .fn.inViewport = function（cb）{return this.each（function（i，el）{function visPx（）{var H = $（this）.height（），r = el.getBoundingClientRect（），t = r.top，b = r.bottom; return cb.call（el，Math.max（0，t> 0→Ht：（b

html，body {height ：100％;}＃upper-push {height：100％;宽度：100％;显示：块;背景：红色; color：white;}

< script src =https ：//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< div id =upper-push>向下滚动< / div>< div id =numbers> < span class =fig-number> 25< / span> < span class =fig-number> 78 < / div>

$ b

I have a counter which animates to a final number which is defined in the HTML. However I would like this animation to happen once it's in the viewport.

I have a fiddle here which shows how scrolling seems to effect the counter number.

$(document).ready(function() {
      $(function($, win) {
        $.fn.inViewport = function(cb) {
          return this.each(function(i, el) {
            function visPx() {
              var H = $(this).height(),
                r = el.getBoundingClientRect(),
                t = r.top,
                b = r.bottom;
              return cb.call(el, Math.max(0, t > 0 ? H - t : (b < H ? b : H)));
            }
            visPx();
            $(win).on("resize scroll", visPx);
          });
        };
      }(jQuery, window));

      $(".fig-number").inViewport(function(px) {
        $(this).each(function() {
          $(this).prop('Counter', 0).animate({
            Counter: $(this).text()
          }, {
            duration: 1000,

            step: function(now) {
              $(this).text(Math.ceil(now));
            }
          });
        });
      });
    });

I've tried multiple things but I cant seem to achieve what I'm after.

$(document).ready(function() {
  $(function($, win) {
    $.fn.inViewport = function(cb) {
      return this.each(function(i, el) {
        function visPx() {
          var H = $(this).height(),
            r = el.getBoundingClientRect(),
            t = r.top,
            b = r.bottom;
          return cb.call(el, Math.max(0, t > 0 ? H - t : (b < H ? b : H)));
        }
        visPx();
        $(win).on("resize scroll", visPx);
      });
    };
  }(jQuery, window));

  $(".fig-number").inViewport(function(px) {
    $(this).each(function() {
      $(this).prop('Counter', 0).animate({
        Counter: $(this).text()
      }, {
        duration: 1000,

        step: function(now) {
          $(this).text(Math.ceil(now));
        }
      });
    });
  });
});

html,
body {
  height: 100%;
}
#upper-push {
  height: 100%;
  width: 100%;
  display: block;
  background: red;
  color: white;
}

<div id="upper-push">
  Scroll down
</div>
<div id="numbers">
  <span class="fig-number">25</span>
  <span class="fig-number">78</span>
</div>

解决方案

The .inViewport() plugin triggers a callback on every scroll event.
It's by design. (Helps to keep the source of a plugin in code! ;) )

On the "plugin page" you can see how to use it:

$("selector").inViewport(function(px) {
  console.log( px ); // `px` represents the amount of visible height
  if(px){
    // do this if element enters the viewport // px > 0
  }else{
    // do that if element exits  the viewport // px = 0
  }
}); // Here you can chain other jQuery methods to your selector

that means:

  1. You have to listen for the px argument is greater than 0 (element is in viewport)
  2. To prevent chaining additional animations creating buildups, you should use a flag variable
  3. (The $(this).each() inside the callback is not needed. The plugin already operates over a collection of elements.)

Edited jsFiddle demo

jQuery(function($) { // DOM ready and $ in scope

  $(".fig-number").inViewport(function(px) {
    // if px>0 (entered V.port) and
    // if prop initNumAnim flag is not yet set = Animate numbers
    if(px>0 && !this.initNumAnim) { 
      this.initNumAnim = true; // Set flag to true to prevent re-running the same animation
      // <<< DO SOME COOL STUFF HERE! 
    }
  });

});

Snippet example:

// inViewport jQuery plugin
// https://stackoverflow.com/a/26831113/383904
$(function($, win) {
  $.fn.inViewport = function(cb) {
    return this.each(function(i,el){
      function visPx(){
        var H = $(this).height(),
            r = el.getBoundingClientRect(), t=r.top, b=r.bottom;
        return cb.call(el, Math.max(0, t>0? H-t : (b<H?b:H)));  
      } visPx();
      $(win).on("resize scroll", visPx);
    });
  };
}(jQuery, window));


jQuery(function($) { // DOM ready and $ in scope

  $(".fig-number").inViewport(function(px) { // Make use of the `px` argument!!!
    // if element entered V.port ( px>0 ) and
    // if prop initNumAnim flag is not yet set
    //  = Animate numbers
    if(px>0 && !this.initNumAnim) { 
      this.initNumAnim = true; // Set flag to true to prevent re-running the same animation
      $(this).prop('Counter',0).animate({
        Counter: $(this).text()
      }, {
        duration: 1000,
        step: function (now) {
          $(this).text(Math.ceil(now));
        }
      });         
    }
  });

});

html,
body {
  height:100%;
}

#upper-push {
  height:100%;
  width:100%;
  display:block;
  background:red;
  color:white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="upper-push">
  Scroll down
</div>
<div id="numbers">
  <span class="fig-number">25</span>
  <span class="fig-number">78</span>
</div>

这篇关于在视口中动画计数器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆