在特定html部分开始活动

我有一个计数器，计数1-20。问题是每当页面加载/刷新时就开始计数。所以观看者看不到动画计数。当访问者到达特定部分时，我如何开始计数（部分ID =计数器）。在特定html部分开始活动

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)); 
     } 
    }); 
});

来源

2017-02-01 Ami Hasan

您可以使用滚动事件不断检查科目前正在查看这取决于您的喜好时，正是你想要的动画开始。

当你这样做的时候，你必须添加一些东西给元素，指示动画已经开始，并且只有在动画没有被触发过时才开始动画。

$(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>

来源

2017-02-01 05:55:42 josephting

谢谢，这正是我一直想要的。 –

试试这个：

$('.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

来源

2017-02-01 05:28:39

遗憾地说，我找不到你的代码和我的代码有什么区别。它也在做同样的事情。当我的鼠标滚动到计数器部分时，我想要触发这个jQuery事件。 –

我添加了jquery功能1.9.1版本@AmiHasan –

在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)); 
     } 
     }); 
    }); 
    } 
})

来源

2017-02-01 05:47:15

在特定html部分开始活动

回答

相关问题