jquery - ロードセクションでjqueryノブをアニメーション化

Question

私はウェブサイトで jquery.knob プラグインを使用していますが、実装は非常に簡単です。私はそれをアニメーション化し、すべて問題ありませんが、Web の特定のセクションにスクロールしたときにアニメーション効果を開始したいと思います。たとえば、#about セクションにスクロールしたときです。

それが可能かどうか誰でも知っていますか？

前もって感謝します

Answer 1

jquery.inviewなど、要素がスクロールして表示されるかどうかを確認するための jQuery プラグインがいくつかあります 。

セットアップ例:

<input type='text' class='dial' value='0' data-number='100' />
<div style="height: 300px">scroll down</div>
<div class="startKnob">start</div>

ノブを初期化し、アニメーションの関数を記述します。inviewビューポートの外にある要素にバインドするだけで、表示されるとすぐにアニメーションを開始する必要があります。

$(function () {
  $('.dial').knob({
     min: '0',
     max: '100',
     readOnly: true
  });
});

startKnob =  function() {
  $('.dial').animate({
      value: $('.dial').data('number')
  },{
      duration: 950,
      easing: 'swing',
      progress: function () {
                 $('.dial').val(Math.round(this.value)).trigger('change');
     }
 });
}

$('.startKnob').bind('inview', startKnob);

ここでの作業例:特定の要素が表示されているときにノブのアニメーションを開始する