滾動的動畫數字計數器

我在我的網頁上有一些統計數據，並且在某些網站上看到，在滾動到頁面的那一部分時，可能會使數字達到目標數量。我將如何實現這一目標？滾動的動畫數字計數器

.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/

來源

2015-05-23 iamdanmorris

_「可能使數字達到目標數字。」_哪個數字？「數」到什麼目標數字？ – guest271314

每個人從0開始計數到顯示的數字，例如0 - 20？ – iamdanmorris

「每一個」什麼是「一個」？ – guest271314

嘗試

$(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/

來源

2015-05-23 22:43:52 guest271314

像夢一樣工作。謝謝！唯一的一點是，每次用戶滾動都可以停止，因此它只會發生一次 - 即當頁面上首次出現數字時，它會重新計數？ – iamdanmorris

太棒了，謝謝。我知道我現在很痛苦，但我還有一個最後的問題。我嘗試了一個「stat-numbers」來讀取19K，但它只是顯示19是不可能有 - 或約19,000？ – iamdanmorris

@iamdanmorris查看更新後的帖子。 – guest271314

您將需要使用JavaScript來實現此目的。基本上你在這裏有三個任務：

檢測包含統計信息的DOM元素在視口中可見。
執行計數器動畫。
將點1和點2放在一起 - 在每個統計信息可見時觸發動畫。

我會建議重複使用已有的解決方案。要檢測該元素在視口中，可以使用jQuery.appear插件。對於反動畫，您可以使用CountUp.js。我修改了你的jsfiddle來顯示這兩個一起工作https://jsfiddle.net/dqsbrtxa/1/。請注意，我必須添加id才能觸發動畫。你可以從plugin和lib的文檔中獲得更多的細節和配置選項。

來源

2015-05-23 22:52:55 tauzen

滾動的動畫數字計數器

回答

相關問題