滚动的动画数字计数器

时间：2015-05-23 21:34:00

标签： jquery html css

我在我的网页上有一些统计数据，并且在一些网站上看到，滚动到页面的那一部分可以使数字计数到目标数字。我将如何实现这一目标？

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

2 个答案:

答案 0 :(得分：3)

尝试

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

答案 1 :(得分：0)

您需要使用JavaScript来实现此目的。基本上你在这里有三个任务：

  1. 检测包含统计信息的DOM元素在视口中是否可见。
  2. 实施计数器动画。
  3. 将第1点和第2点放在一起 - 一旦可见，就触发每个统计数据的动画。

    4. 我建议重用已有的解决方案。要检测该元素是否在视口中，您可以使用jQuery.appear插件。对于计数器动画，您可以使用CountUp.js。我修改了你的jsfiddle以显示这两个一起工作https://jsfiddle.net/dqsbrtxa/1/。请注意，我必须添加id才能触发动画。您可以从插件和库的文档中获取更多详细信息和配置选项。

相关问题
最新问题