號碼動畫上雙擊自動滾屏開始下降

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