iamdanmorris iamdanmorris - 2 months ago 22
CSS Question

animated number counter on scroll

I have a few statistics on my webpage and have seen on some sites that on scrolling to that part of the page its possible to make the numbers count up to a target number. How would i achieve this?



.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

Try

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