在特定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部分開始活動

回答

相關問題