我有一个计数器,动画到
HTML中定义的最后一个数字.不过我希望这个动画在视口中出现.
我有一个fiddle here,显示滚动似乎影响计数器号码.
$(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));
}
});
});
});
});
我尝试过多件事情,但我似乎无法实现我所追求的目标.
$(document).ready(function() {
$(function($,win) {
$.fn.inViewport = function(cb) {
return this.each(function(i,el) {
function visPx() {
var H = $(this).height(),b = r.bottom;
return cb.call(el,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>
解决方法
.inViewport()插件在每个滚动事件上触发回调.
这是设计. (帮助保持插件的源代码！))
这是设计. (帮助保持插件的源代码！))
在“plugin page”你可以看到如何使用它：
$("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
这意味着：
>你必须收听px参数大于0(元素在视口中)
>为了防止链接额外的动画创建累积,你应该使用一个标志变量
>(回调中的$(this).each()不需要,插件已经在元素集合上运行了.)
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!
}
});
});
代码段示例：
// 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(),t=r.top,b=r.bottom;
return cb.call(el,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',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>
