Пишем нашу разметку:
Пишем наш стиль:
Пишем jquery:
Смотрим наш результат:
HTML:
<div class="qa-widget-side qa-widget-side-top">
<div class="qa-activity-count">
<p class="qa-activity-count-item">
<span class="qa-activity-count-data">13,164</span> questions
</p>
<p class="qa-activity-count-item">
<span class="qa-activity-count-data">22,252</span> answers
</p>
<p class="qa-activity-count-item">
<span class="qa-activity-count-data">1</span> comment
</p>
<p class="qa-activity-count-item">
<span class="qa-activity-count-data">21</span> users
</p>
</div>
</div>
CSS:
*{box-sizing:border-box;font-family: roboto,sans-serif;}
h2{text-align: center;}
.qa-activity-count {
position: relative;
width: 100%;
max-width: 300px;
padding-top: 25px;
margin: 0 auto 20px auto;
background-color: #58b4d3;
background:linear-gradient(#58b4d3,#695fb5);
color: #fff;
overflow: hidden;
border-radius: 15px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
}
.qa-activity-count:before {
content: "\E01D";
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 160px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
opacity: 0.07;
}
.qa-activity-count:after {
content: "Statistics";
color: #212121;
line-height: 55px;
text-align: center;
display: block;
clear: both;
height: 55px;
background-color: #fff;
}
.qa-activity-count-item {
padding: 10px 0px;
width: 50%;
float: left;
font-size: 13px;
color: rgba(255, 255, 255, 0.35);
text-align: center;
margin: 0;
white-space: nowrap;
text-transform: uppercase;
z-index: 9;
position: relative;
transition: color 0.2s ease-in-out;
}
.qa-activity-count:hover .qa-activity-count-item {
color: rgba(255, 255, 255, 0.7);
}
.qa-activity-count-data {
display: block;
font-size: 30px;
font-family: 'Arimo', sans-serif;
color: #fff;
}
JavaScript:
$('.qa-activity-count-data').each(function () {
var n = $(this).text();
(n <= 20 ? z=99 : z=0);
$(this).prop('Counter',z).animate({
Counter: n.replace(/,/g, '')
}, {
duration: 1000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
},
complete: function(){
$(this).text(n);
}
});
});