Анимированный счетчик чисел на прокрутке

Question

У меня есть несколько статистических данных на моей веб-странице и вы видели на некоторых сайтах, что при прокрутке на эту часть страницы можно сделать число, подсчитанное до целевого номера. Как я могу это достичь?

.personality { 
 
    width: 100%; 
 
    height: 300px; 
 
    float: left; 
 
    background: rgb(0, 200, 200); 
 
    background: rgba(52, 119, 206, 0.7); 
 
    background-position: center; 
 
    background-size: cover; 
 
    background-image: url(../images/25H.jpg); 
 
    background-attachment: fixed; 
 
} 
 

 
.personality-overlay{ 
 
    width: 100%; 
 
    height: 300px; 
 
    float: left; 
 
    background: rgb(0, 200, 200); 
 
    background: rgba(52, 119, 206, 0.7); 
 
    background-attachment: fixed; 
 
} 
 

 
.statsbar { 
 
    width: 100%; 
 
    height: 100px; 
 
    margin-top:120px; 
 

 
} 
 

 
.stat-one { 
 
    width: 25%; 
 
    height: 100px; 
 
    float:left; 
 
} 
 

 
.stat-two { 
 
    width: 25%; 
 
    height: 100px; 
 
    float:left; 
 
} 
 

 
.stat-three { 
 
    width: 25%; 
 
    height: 100px; 
 
    float:left; 
 
} 
 

 
.stat-four { 
 
    width: 25%; 
 
    height: 100px; 
 
    float:left; 
 
} 
 

 
.stat-number { 
 
    width: 100%; 
 
    height: 50px; 
 
    float:left; 
 
    text-align:center; 
 
    color:#FFF; 
 
    font-size: 60px; 
 
    font-weight: 100; 
 
    text-transform: uppercase; 
 
    color:#FFF; 
 
} 
 

 
.stat-title { 
 
    width: 100%; 
 
    height: 50px; 
 
    float:left; 
 
    text-align:center; 
 
    color:#FFF; 
 
    font-size: 14px; 
 
    font-weight: 100; 
 
    text-transform: uppercase; 
 
    color:#FFF; 
 
}

<div class="personality"> 
 
    <div class="personality-overlay"> 
 
    <div class="statsbar"> 
 
     <div class="stat-one"> 
 
     <div class="stat-number">200</div> 
 
     <div class="stat-title">CUPS OF TEA A DAY</div> 
 
     </div> 
 
     <div class="stat-two"> 
 
     <div class="stat-number">60</div> 
 
     <div class="stat-title">MINIMUM HOURS OF SLEEP A WEEK</div> 
 
     </div> 
 
     <div class="stat-three"> 
 
     <div class="stat-number">10</div> 
 
     <div class="stat-title">CUPS OF TEA A DAY</div> 
 
     </div> 
 
     <div class="stat-four"> 
 
     <div class="stat-number">10%</div> 
 
     <div class="stat-title">HOURS SLEEP A WEEK</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Jfiddle - https://jsfiddle.net/dr8g1gop/

Answer 1

Попробуйте

$(function() { 
 
     var fx = function fx() { 
 
      var dfd = $(".stat-number").map(function (i, el) { 
 
       var data = parseInt(this.dataset.n, 10); 
 
       var props = { 
 
       "from": { 
 
        "count": 0 
 
       }, 
 
       "to": { 
 
        "count": data 
 
       } 
 
       }; 
 
      return $(props.from).animate(props.to, { 
 
       duration: 1000 * 1, 
 
       step: function (now, fx) { 
 
        $(el).text(Math.ceil(now)); 
 
       }, 
 
       complete: function() { 
 
        if (el.dataset.sym !== undefined) { 
 
        el.textContent = el.textContent.concat(el.dataset.sym) 
 
        } 
 
       } 
 
      }).promise(); 
 
     }).toArray(); 
 
      // return jQuery promise when all animations complete 
 
      return $.when.apply($, dfd); 
 
     }; 
 
     
 
     var reset = function reset() { 
 
      console.log($(this).scrollTop()); 
 
      // do stuff when window `.scrollTop()` > 75 
 
      if ($(this).scrollTop() > 50) { 
 
       // turn off scroll event so `fx` not called 
 
       // during ongoing animation 
 
       $(this).off("scroll"); 
 
       // when all animations complete 
 
       fx() 
 
      } 
 
     }; 
 
     // if `fx` should only be called once , 
 
     // change `.on()` to `.one()` , 
 
     // remove `.then()` callback following `fx()` 
 
     // within `reset` 
 
     $(window).on("scroll", reset); 
 
    });

.personality { 
 
width: 100%; 
 
height: 300px; 
 
float: left; 
 
background: rgb(0, 200, 200); 
 
background: rgba(52, 119, 206, 0.7); 
 
background-position: center; 
 
background-size: cover; 
 
background-image: url(../images/25H.jpg); 
 
background-attachment: fixed; 
 
} 
 

 
.personality-overlay{ 
 
width: 100%; 
 
height: 300px; 
 
float: left; 
 
background: rgb(0, 200, 200); 
 
background: rgba(52, 119, 206, 0.7); 
 
background-attachment: fixed; 
 
} 
 

 
.statsbar { 
 

 
width: 100%; 
 
height: 100px; 
 
margin-top:120px; 
 

 
} 
 

 
.stat-one { 
 

 
width: 25%; 
 
height: 100px; 
 
float:left; 
 

 
} 
 

 
.stat-two { 
 

 
width: 25%; 
 
height: 100px; 
 
float:left; 
 

 
} 
 

 
.stat-three { 
 

 
width: 25%; 
 
height: 100px; 
 
float:left; 
 

 
} 
 

 
.stat-four { 
 

 
width: 25%; 
 
height: 100px; 
 
float:left; 
 

 
} 
 

 
.stat-number { 
 

 
width: 100%; 
 
height: 50px; 
 
float:left; 
 
text-align:center; 
 
color:#FFF; 
 
font-size: 60px; 
 
font-weight: 100; 
 
text-transform: uppercase; 
 
color:#FFF; 
 

 
} 
 

 
.stat-title { 
 

 
width: 100%; 
 
height: 50px; 
 
float:left; 
 
text-align:center; 
 
color:#FFF; 
 
font-size: 14px; 
 
font-weight: 100; 
 
text-transform: uppercase; 
 
color:#FFF; 
 
} 
 
    background-image: url(../images/25H.jpg); 
 
    background-attachment: fixed; 
 
} 
 
.personality-overlay { 
 
    width: 100%; 
 
    height: 300px; 
 
    float: left; 
 
    background: rgb(0, 200, 200); 
 
    background: rgba(52, 119, 206, 0.7); 
 
    background-attachment: fixed; 
 
} 
 
.statsbar { 
 
    width: 100%; 
 
    height: 100px; 
 
    margin-top:120px; 
 
} 
 
.stat-one { 
 
    width: 25%; 
 
    height: 100px; 
 
    float:left; 
 
} 
 
.stat-two { 
 
    width: 25%; 
 
    height: 100px; 
 
    float:left; 
 
} 
 
.stat-three { 
 
    width: 25%; 
 
    height: 100px; 
 
    float:left; 
 
} 
 
.stat-four { 
 
    width: 25%; 
 
    height: 100px; 
 
    float:left; 
 
} 
 
.stat-number { 
 
    width: 100%; 
 
    height: 50px; 
 
    float:left; 
 
    text-align:center; 
 
    color:#FFF; 
 
    font-size: 60px; 
 
    font-weight: 100; 
 
    text-transform: uppercase; 
 
    color:#FFF; 
 
} 
 
.stat-title { 
 
    width: 100%; 
 
    height: 50px; 
 
    float:left; 
 
    text-align:center; 
 
    color:#FFF; 
 
    font-size: 14px; 
 
    font-weight: 100; 
 
    text-transform: uppercase; 
 
    color:#FFF; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<div class="personality"> 
 
    <div class="personality-overlay"> 
 
     <div class="statsbar"> 
 
      <div class="stat-one"> 
 
       <div class="stat-number" data-n="200"><span class="Single">0</span> 
 
       </div> 
 
       <div class="stat-title">CUPS OF TEA A DAY</div> 
 
      </div> 
 
      <div class="stat-two"> 
 
       <div class="stat-number" data-n="60">0</div> 
 
       <div class="stat-title">MINIMUM HOURS OF SLEEP A WEEK</div> 
 
      </div> 
 
      <div class="stat-three"> 
 
       <div class="stat-number" data-n="10">0</div> 
 
       <div class="stat-title">CUPS OF TEA A DAY</div> 
 
      </div> 
 
      <div class="stat-four"> 
 
       <div class="stat-number" data-n="10" data-sym="%">0</div> 
 
       <div class="stat-title">HOURS SLEEP A WEEK</div> 
 
      </div> 
 
     </div> 
 
        <div class="stat-five"> 
 
       <div class="stat-number" data-n="19" data-sym="k">0</div> 
 
       <div class="stat-title">DO STUFF</div> 
 
      </div> 
 
    </div> 
 
</div>

jsfiddle https://jsfiddle.net/dr8g1gop/17/

Answer 2

Для этого вам необходимо использовать JavaScript. В основном у вас есть три задачи:

1. Обнаружить, что элемент DOM, содержащий статистику, отображается в окне просмотра.
2. Реализация счетчика анимации.
3. Поместите точки 1 и 2 вместе - анимация триггера для каждой статистики, как только она будет видна.

Я бы посоветовал повторно использовать уже имеющиеся решения. Чтобы обнаружить этот элемент в окне просмотра, вы можете использовать плагин jQuery.appear. Для счетной анимации вы можете использовать CountUp.js. Я изменил ваш jsfiddle, чтобы показать, что эти два работают вместе https://jsfiddle.net/dqsbrtxa/1/. Обратите внимание, что мне нужно было добавить id, чтобы иметь возможность запускать анимацию. Вы можете получить дополнительные сведения и параметры конфигурации из документации плагина и библиотеки.