ナンバーアニメーション私は私のウェブサイト上で、次の数アニメーションを使用しましたダウンscroolに

Question

を開始：http://codepen.io/syedrafeeq/details/rcfsJ/

しかし、アニメーションは、その特定のページセクションでは起動しませんが、私はページを更新する場合にのみ開始します。訪問者がそのページセクションまでスクロールしたときにトリガーしたいと思います。

どうすればいいですか？

jQueryの

(function ($) { 
    $.fn.countTo = function (options) { 
     options = options || {}; 

     return $(this).each(function() { 
      // set options for current element 
      var settings = $.extend({}, $.fn.countTo.defaults, { 
       from:   $(this).data('from'), 
       to:    $(this).data('to'), 
       speed:   $(this).data('speed'), 
       refreshInterval: $(this).data('refresh-interval'), 
       decimals:  $(this).data('decimals') 
      }, options); 

      // how many times to update the value, and how much to increment the value on each update 
      var loops = Math.ceil(settings.speed/settings.refreshInterval), 
       increment = (settings.to - settings.from)/loops; 

      // references & variables that will change with each update 
      var self = this, 
       $self = $(this), 
       loopCount = 0, 
       value = settings.from, 
       data = $self.data('countTo') || {}; 

      $self.data('countTo', data); 

      // if an existing interval can be found, clear it first 
      if (data.interval) { 
       clearInterval(data.interval); 
      } 
      data.interval = setInterval(updateTimer, settings.refreshInterval); 

      // initialize the element with the starting value 
      render(value); 

      function updateTimer() { 
       value += increment; 
       loopCount++; 

       render(value); 

       if (typeof(settings.onUpdate) == 'function') { 
        settings.onUpdate.call(self, value); 
       } 

       if (loopCount >= loops) { 
        // remove the interval 
        $self.removeData('countTo'); 
        clearInterval(data.interval); 
        value = settings.to; 

        if (typeof(settings.onComplete) == 'function') { 
         settings.onComplete.call(self, value); 
        } 
       } 
      } 

      function render(value) { 
       var formattedValue = settings.formatter.call(self, value, settings); 
       $self.html(formattedValue); 
      } 
     }); 
    }; 

    $.fn.countTo.defaults = { 
     from: 0,    // the number the element should start at 
     to: 0,     // the number the element should end at 
     speed: 1000,   // how long it should take to count between the target numbers 
     refreshInterval: 100, // how often the element should be updated 
     decimals: 0,   // the number of decimal places to show 
     formatter: formatter, // handler for formatting the value before rendering 
     onUpdate: null,  // callback method for every time the element is updated 
     onComplete: null  // callback method for when the element finishes updating 
    }; 

    function formatter(value, settings) { 
     return value.toFixed(settings.decimals); 
    } 
}(jQuery)); 

jQuery(function ($) { 
    // custom formatting example 
    $('.count-number').data('countToOptions', { 
    formatter: function (value, options) { 
     return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ','); 
    } 
    }); 

    // start all the timers 
    $('.timer').each(count); 

    function count(options) { 
    var $this = $(this); 
    options = $.extend({}, options || {}, $this.data('countToOptions') || {}); 
    $this.countTo(options); 
    } 
}); 

マイHTML：

<section id="Four" class="wrapper style3"> 
       <div class="inner"> 
        <div class="container"> 
         <div class="row"> 
           <div class="two columns"> 
           <i class="fa fa-truck fa-5x"></i> 
           <h3>A Fleet of</h3> 
           <div class="counter col_fourth"> 
           <h2 class="timer count-title count-number" data-to="120" data-speed="2000"></h2> 
           </div> 
           <p class="text-box">TRUCKS</p> 
          </div> 
           <div class="two columns"> 
           <i class="fa fa-users fa-5x"></i> 
           <h3>Involving</h3> 
           <div class="counter col_fourth"> 
           <h2 class="timer count-title count-number" data-to="160" data-speed="2000"></h2> 
           </div> 
           <p class="text-box">EMPLOYEES</p> 
          </div> 
           <div class="two columns"> 
           <i class="fa fa-cubes fa-5x"></i> 
           <h3>Loading</h3> 
           <div class="counter col_fourth"> 
           <h2 class="timer count-title count-number" data-to="6686" data-speed="2000"></h2> 
           </div> 
           <p class="text-box">FTL LOADS IN 2016</p> 
          </div> 
           <div class="two columns"> 
           <i class="fa fa-leaf fa-5x"></i> 
           <h3>Emissions</h3> 
           <div class="counter col_fourth"> 
           <h2 class="timer count-title count-number" data-to="100" data-speed="2000"></h2> 
           </div> 
           <p class="text-box">100% EURO 6</p> 
          </div> 
           <div class="two columns"> 
           <i class="fa fa-compress fa-5x"></i> 
           <h3>Trailers</h3> 
           <div class="counter col_fourth"> 
           <h2 class="timer count-title count-number" data-to="160" data-speed="2000"></h2> 
           </div> 
           <p class="text-box">TRAILERS</p> 
          </div> 
           <div class="two columns"> 
           <i class="fa fa-calendar fa-5x"></i> 
           <h3>Since</h3> 
           <div class="counter col_fourth"> 
           <h2 class="timer count-title count-number" data-to="1991" data-speed="2000"></h2> 
           </div> 
           <p class="text-box">25 YEARS OF SERVICE</p> 
          </div> 
         </div> 
        </section> 
       </div> 
      </div> 
     </section>**strong text** 

Answer 1

あなたがそのセクションにスクロールしたときにアニメーションをトリガするためにjQueryのウェイポイントのプラグインを使用することができます。ライブラリをダウンロードし、HTMLでインポートします。次に、トリガする必要があるポイントを特定します。このようなもの。

var waypoint = new Waypoint({ 
    element: document.getElementById('Four'), 
    handler: function(direction) { 
    //Put here or call your javascript code for animation 
    }, 
    offset: 50% 
})