This a block on counting Up numbers that start when they come into view.
CSS
/* ===== COUNTING UP STATISTICS ===== */
.jsn-demo-page #jsn-usermodules1,
.jsn-demo-page #jsn-usermodules2 {
border: none;
padding: 0;
}
.jsn-demo-page #demo-countingup-stats {
background: #2e353c url(/images/kb/2016/737/triangles.jpg) center center fixed;
background-size: 100% auto;
color: #fff;
}
.jsn-demo-page #demo-countingup-stats {
width: 1000px;
max-width: 100%;
margin: 0 auto;
padding: 100px 0;
}
.jsn-demo-page #demo-countingup-stats .stat-group {
text-align: center;
padding: 0 30px;
border-right: 1px solid rgba(255,255,255,0.1);
}
.jsn-demo-page #demo-countingup-stats .grid-lastcol .stat-group {
border-right: none;
}
.jsn-demo-page #demo-countingup-stats .stat-group .heading {
text-transform: uppercase;
letter-spacing: 3px;
font-size: 2.2em;
line-height: 36px;
margin: 0;
}
.jsn-demo-page #demo-countingup-stats .stat-group .sub-heading {
text-transform: uppercase;
letter-spacing: 3px;
font-size: 1.5em;
line-height: 20px;
margin: 0;
color: #ddd;
font-weight: 400;
}
.jsn-demo-page #demo-countingup-stats .stat-group .counting-number {
font-family: 'PT Sans', Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 8.5em;
line-height: 90px;
padding: 30px 0 20px;
text-transform: uppercase;
color: #fff;
}
.jsn-demo-page #demo-countingup-stats .stat-group .desc {
text-transform: uppercase;
font-size: 1.3em;
letter-spacing: 4px;
line-height: 30px;
margin: 0;
color: #ddd;
}
/* ===== RESPONSIVE OPTIMIZING ===== */
@media only screen and (max-width: 1100px), (max-device-width: 1100px) {
}
@media only screen and (max-width: 960px), (max-device-width: 960px) {
/* Counting Stats */
.jsn-mobile.jsn-demo-page #demo-countingup-stats div.grid-layout4 div.grid-col {
width: 24.96%;
}
.jsn-mobile.jsn-demo-page #demo-countingup-stats .stat-group .heading {
font-size: 1.4em;
}
.jsn-mobile.jsn-demo-page #demo-countingup-stats .stat-group .counting-number {
font-size: 6em;
}
.jsn-mobile.jsn-demo-page #demo-countingup-stats .stat-group .sub-heading,
.jsn-mobile.jsn-demo-page #demo-countingup-stats .stat-group .desc {
font-size: 1em;
}
}
@media only screen and (max-width: 480px), (max-device-width: 480px) {
.jsn-mobile.jsn-demo-page .demo-countingup-stats {
background-size: 300% auto;
}
.jsn-mobile.jsn-demo-page #demo-countingup-stats {
padding: 60px 0;
}
.jsn-mobile.jsn-demo-page #demo-countingup-stats div.grid-layout4 div.grid-col {
width: 100%;
}
.jsn-mobile.jsn-demo-page #demo-countingup-stats .stat-group {
padding: 30px 0;
margin: 0 40px;
border-right: none;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.jsn-mobile.jsn-demo-page #demo-countingup-stats .stat-group .counting-number {
padding: 10px 0 0;
}
}
CSS (Optional / Animation / Waypoints)
This code might not be optional , it causes the counting to happen when it comes into view, so this on its own, might make this code mandatory. The required Waypoint javascript is already included.
/* ===== WAYPOINT ONSCROLL ACTION ===== */
/* Waypoint by http://imakewebthings.com/jquery-waypoints/ */
/* Declare scale-fade animation */
@keyframes scale-fade
{
0% { transform:scale(0.5);
opacity:0;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
100% { transform:scale(1);
opacity:1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
}
@-moz-keyframes scale-fade
{
0% { -moz-transform:scale(0.5);
opacity:0;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
100% { -moz-transform:scale(1);
opacity:1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
}
@-webkit-keyframes scale-fade
{
0% { -webkit-transform:scale(0.5);
opacity:0;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
100% { -webkit-transform:scale(1);
opacity:1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
}
/* Declare translate-fade animation */
@keyframes translate-fade
{
0% { transform:translate(0,50px);
opacity:0;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
100% { transform:translate(0,0);
opacity:1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
}
@-moz-keyframes translate-fade
{
0% { -moz-transform:translate(0,50px);
opacity:0;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
100% { -moz-transform:translate(0,0);
opacity:1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
}
@-webkit-keyframes translate-fade
{
0% { -webkit-transform:translate(0,50px);
opacity:0;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
100% { -webkit-transform:translate(0,0);
opacity:1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
}
.appearing .project-item,
.appearing .main-features .feature-item [class*="fa fa-"],
.appearing .graph-item .graph-item-inner,
.appearing .stat-group .counting-number {
opacity:0;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-moz-transform: scale(0.5);
-webkit-transform: scale(0.5);
-ms-transform: scale(0.5);
transform: scale(0.5);
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.appearing.scroll-action .project-item,
.appearing.scroll-action .main-features .feature-item [class*="fa fa-"],
.appearing.scroll-action .graph-item .graph-item-inner,
.appearing.scroll-action .stat-group .counting-number {
-webkit-animation: scale-fade 0.8s 1 cubic-bezier(0,.61,.46,1.33);
-moz-animation: scale-fade 0.8s 1 cubic-bezier(0,.61,.46,1.33);
animation: scale-fade 0.8s 1 cubic-bezier(0,.61,.46,1.33);
opacity:1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.appearing .apple-devices {
opacity:0;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-moz-transform: translate(0,50px);
-webkit-transform: translate(0,50px);
-ms-transform: translate(0,50px);
transform: translate(0,50px);
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.appearing.scroll-action .apple-devices {
-webkit-animation: translate-fade 1s 1 ease-in-out;
-moz-animation: translate-fade 1s 1 ease-in-out;
animation: translate-fade 1s 1 ease-in-out;
opacity:1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-moz-transform: translate(0,0);
-webkit-transform: translate(0,0);
-ms-transform: translate(0,0);
transform: translate(0,0);
}
.scroll-down {
}
.scroll-down.scroll-action {
opacity:0;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
JS
// The 'Counting Up' module with 4 numbers - with waypoint configured
setTimeout(function() {
(function($) {
//----------------------------------------
// intiates the Waypoints codebase
// This causes animations to be paused until triggered by the Waypoints code
// Waypoints are configured later
/* Waypoints */
(function(){var t=[].indexOf||function(t){for(var e=0,n=this.length;e<n;e++){if(e in this&&this[e]===t)return e}return-1},e=[].slice;(function(t,e){if(typeof define==="function"&&define.amd){return define("waypoints",["jquery"],function(n){return e(n,t)})}else{return e(t.jQuery,t)}})(window,function(n,r){var i,o,l,s,f,u,c,a,h,d,p,y,v,w,g,m;i=n(r);a=t.call(r,"ontouchstart")>=0;s={horizontal:{},vertical:{}};f=1;c={};u="waypoints-context-id";p="resize.waypoints";y="scroll.waypoints";v=1;w="waypoints-waypoint-ids";g="waypoint";m="waypoints";o=function(){function t(t){var e=this;this.$element=t;this.element=t[0];this.didResize=false;this.didScroll=false;this.id="context"+f++;this.oldScroll={x:t.scrollLeft(),y:t.scrollTop()};this.waypoints={horizontal:{},vertical:{}};this.element[u]=this.id;c[this.id]=this;t.bind(y,function(){var t;if(!(e.didScroll||a)){e.didScroll=true;t=function(){e.doScroll();return e.didScroll=false};return r.setTimeout(t,n[m].settings.scrollThrottle)}});t.bind(p,function(){var t;if(!e.didResize){e.didResize=true;t=function(){n[m]("refresh");return e.didResize=false};return r.setTimeout(t,n[m].settings.resizeThrottle)}})}t.prototype.doScroll=function(){var t,e=this;t={horizontal:{newScroll:this.$element.scrollLeft(),oldScroll:this.oldScroll.x,forward:"right",backward:"left"},vertical:{newScroll:this.$element.scrollTop(),oldScroll:this.oldScroll.y,forward:"down",backward:"up"}};if(a&&(!t.vertical.oldScroll||!t.vertical.newScroll)){n[m]("refresh")}n.each(t,function(t,r){var i,o,l;l=[];o=r.newScroll>r.oldScroll;i=o?r.forward:r.backward;n.each(e.waypoints[t],function(t,e){var n,i;if(r.oldScroll<(n=e.offset)&&n<=r.newScroll){return l.push(e)}else if(r.newScroll<(i=e.offset)&&i<=r.oldScroll){return l.push(e)}});l.sort(function(t,e){return t.offset-e.offset});if(!o){l.reverse()}return n.each(l,function(t,e){if(e.options.continuous||t===l.length-1){return e.trigger([i])}})});return this.oldScroll={x:t.horizontal.newScroll,y:t.vertical.newScroll}};t.prototype.refresh=function(){var t,e,r,i=this;r=n.isWindow(this.element);e=this.$element.offset();this.doScroll();t={horizontal:{contextOffset:r?0:e.left,contextScroll:r?0:this.oldScroll.x,contextDimension:this.$element.width(),oldScroll:this.oldScroll.x,forward:"right",backward:"left",offsetProp:"left"},vertical:{contextOffset:r?0:e.top,contextScroll:r?0:this.oldScroll.y,contextDimension:r?n[m]("viewportHeight"):this.$element.height(),oldScroll:this.oldScroll.y,forward:"down",backward:"up",offsetProp:"top"}};return n.each(t,function(t,e){return n.each(i.waypoints[t],function(t,r){var i,o,l,s,f;i=r.options.offset;l=r.offset;o=n.isWindow(r.element)?0:r.$element.offset()[e.offsetProp];if(n.isFunction(i)){i=i.apply(r.element)}else if(typeof i==="string"){i=parseFloat(i);if(r.options.offset.indexOf("%")>-1){i=Math.ceil(e.contextDimension*i/100)}}r.offset=o-e.contextOffset+e.contextScroll-i;if(r.options.onlyOnScroll&&l!=null||!r.enabled){return}if(l!==null&&l<(s=e.oldScroll)&&s<=r.offset){return r.trigger([e.backward])}else if(l!==null&&l>(f=e.oldScroll)&&f>=r.offset){return r.trigger([e.forward])}else if(l===null&&e.oldScroll>=r.offset){return r.trigger([e.forward])}})})};t.prototype.checkEmpty=function(){if(n.isEmptyObject(this.waypoints.horizontal)&&n.isEmptyObject(this.waypoints.vertical)){this.$element.unbind([p,y].join(" "));return delete c[this.id]}};return t}();l=function(){function t(t,e,r){var i,o;if(r.offset==="bottom-in-view"){r.offset=function(){var t;t=n[m]("viewportHeight");if(!n.isWindow(e.element)){t=e.$element.height()}return t-n(this).outerHeight()}}this.$element=t;this.element=t[0];this.axis=r.horizontal?"horizontal":"vertical";this.callback=r.handler;this.context=e;this.enabled=r.enabled;this.id="waypoints"+v++;this.offset=null;this.options=r;e.waypoints[this.axis][this.id]=this;s[this.axis][this.id]=this;i=(o=this.element[w])!=null?o:[];i.push(this.id);this.element[w]=i}t.prototype.trigger=function(t){if(!this.enabled){return}if(this.callback!=null){this.callback.apply(this.element,t)}if(this.options.triggerOnce){return this.destroy()}};t.prototype.disable=function(){return this.enabled=false};t.prototype.enable=function(){this.context.refresh();return this.enabled=true};t.prototype.destroy=function(){delete s[this.axis][this.id];delete this.context.waypoints[this.axis][this.id];return this.context.checkEmpty()};t.getWaypointsByElement=function(t){var e,r;r=t[w];if(!r){return[]}e=n.extend({},s.horizontal,s.vertical);return n.map(r,function(t){return e[t]})};return t}();d={init:function(t,e){var r;e=n.extend({},n.fn[g].defaults,e);if((r=e.handler)==null){e.handler=t}this.each(function(){var t,r,i,s;t=n(this);i=(s=e.context)!=null?s:n.fn[g].defaults.context;if(!n.isWindow(i)){i=t.closest(i)}i=n(i);r=c[i[0][u]];if(!r){r=new o(i)}return new l(t,r,e)});n[m]("refresh");return this},disable:function(){return d._invoke.call(this,"disable")},enable:function(){return d._invoke.call(this,"enable")},destroy:function(){return d._invoke.call(this,"destroy")},prev:function(t,e){return d._traverse.call(this,t,e,function(t,e,n){if(e>0){return t.push(n[e-1])}})},next:function(t,e){return d._traverse.call(this,t,e,function(t,e,n){if(e<n.length-1){return t.push(n[e+1])}})},_traverse:function(t,e,i){var o,l;if(t==null){t="vertical"}if(e==null){e=r}l=h.aggregate(e);o=[];this.each(function(){var e;e=n.inArray(this,l[t]);return i(o,e,l[t])});return this.pushStack(o)},_invoke:function(t){this.each(function(){var e;e=l.getWaypointsByElement(this);return n.each(e,function(e,n){n[t]();return true})});return this}};n.fn[g]=function(){var t,r;r=arguments[0],t=2<=arguments.length?e.call(arguments,1):[];if(d[r]){return d[r].apply(this,t)}else if(n.isFunction(r)){return d.init.apply(this,arguments)}else if(n.isPlainObject(r)){return d.init.apply(this,[null,r])}else if(!r){return n.error("jQuery Waypoints needs a callback function or handler option.")}else{return n.error("The "+r+" method does not exist in jQuery Waypoints.")}};n.fn[g].defaults={context:r,continuous:true,enabled:true,horizontal:false,offset:0,triggerOnce:false};h={refresh:function(){return n.each(c,function(t,e){return e.refresh()})},viewportHeight:function(){var t;return(t=r.innerHeight)!=null?t:i.height()},aggregate:function(t){var e,r,i;e=s;if(t){e=(i=c[n(t)[0][u]])!=null?i.waypoints:void 0}if(!e){return[]}r={horizontal:[],vertical:[]};n.each(r,function(t,i){n.each(e[t],function(t,e){return i.push(e)});i.sort(function(t,e){return t.offset-e.offset});r[t]=n.map(i,function(t){return t.element});return r[t]=n.unique(r[t])});return r},above:function(t){if(t==null){t=r}return h._filter(t,"vertical",function(t,e){return e.offset<=t.oldScroll.y})},below:function(t){if(t==null){t=r}return h._filter(t,"vertical",function(t,e){return e.offset>t.oldScroll.y})},left:function(t){if(t==null){t=r}return h._filter(t,"horizontal",function(t,e){return e.offset<=t.oldScroll.x})},right:function(t){if(t==null){t=r}return h._filter(t,"horizontal",function(t,e){return e.offset>t.oldScroll.x})},enable:function(){return h._invoke("enable")},disable:function(){return h._invoke("disable")},destroy:function(){return h._invoke("destroy")},extendFn:function(t,e){return d[t]=e},_invoke:function(t){var e;e=n.extend({},s.vertical,s.horizontal);return n.each(e,function(e,n){n[t]();return true})},_filter:function(t,e,r){var i,o;i=c[n(t)[0][u]];if(!i){return[]}o=[];n.each(i.waypoints[e],function(t,e){if(r(i,e)){return o.push(e)}});o.sort(function(t,e){return t.offset-e.offset});return n.map(o,function(t){return t.element})}};n[m]=function(){var t,n;n=arguments[0],t=2<=arguments.length?e.call(arguments,1):[];if(h[n]){return h[n].apply(null,t)}else{return h.aggregate.call(null,n)}};n[m].settings={resizeThrottle:100,scrollThrottle:30};return i.on("load.waypoints",function(){return n[m]("refresh")})})}).call(this);
//----------------------------------------
// The 'Counting Up' module with 4 numbers
/* Count Up */
function countUp(a,b,c,d,e,f){for(var g=0,h=["webkit","moz","ms"],i=0;i<h.length&&!window.requestAnimationFrame;++i)window.requestAnimationFrame=window[h[i]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[h[i]+"CancelAnimationFrame"]||window[h[i]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(a){var c=(new Date).getTime(),d=Math.max(0,16-(c-g)),e=window.setTimeout(function(){a(c+d)},d);return g=c+d,e}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(a){clearTimeout(a)}),this.options=f||{useEasing:!0,useGrouping:!0,separator:",",decimal:"."},""==this.options.separator&&(this.options.useGrouping=!1);var j=this;this.d="string"==typeof a?document.getElementById(a):a,this.startVal=Number(b),this.endVal=Number(c),this.countDown=this.startVal>this.endVal?!0:!1,this.startTime=null,this.timestamp=null,this.remaining=null,this.frameVal=this.startVal,this.rAF=null,this.decimals=Math.max(0,d||0),this.dec=Math.pow(10,this.decimals),this.duration=1e3*e||2e3,this.version=function(){return"1.1.1"},this.easeOutExpo=function(a,b,c,d){return 1024*c*(-Math.pow(2,-10*a/d)+1)/1023+b},this.count=function(a){null===j.startTime&&(j.startTime=a),j.timestamp=a;var b=a-j.startTime;if(j.remaining=j.duration-b,j.options.useEasing)if(j.countDown){var c=j.easeOutExpo(b,0,j.startVal-j.endVal,j.duration);j.frameVal=j.startVal-c}else j.frameVal=j.easeOutExpo(b,j.startVal,j.endVal-j.startVal,j.duration);else if(j.countDown){var c=(j.startVal-j.endVal)*(b/j.duration);j.frameVal=j.startVal-c}else j.frameVal=j.startVal+(j.endVal-j.startVal)*(b/j.duration);j.frameVal=Math.round(j.frameVal*j.dec)/j.dec,j.frameVal=j.countDown?j.frameVal<j.endVal?j.endVal:j.frameVal:j.frameVal>j.endVal?j.endVal:j.frameVal,j.d.innerHTML=j.formatNumber(j.frameVal.toFixed(j.decimals)),b<j.duration?j.rAF=requestAnimationFrame(j.count):null!=j.callback&&j.callback()},this.start=function(a){return j.callback=a,isNaN(j.endVal)||isNaN(j.startVal)?(console.log("countUp error: startVal or endVal is not a number"),j.d.innerHTML="--"):j.rAF=requestAnimationFrame(j.count),!1},this.stop=function(){cancelAnimationFrame(j.rAF)},this.reset=function(){j.startTime=null,cancelAnimationFrame(j.rAF),j.d.innerHTML=j.formatNumber(j.startVal.toFixed(j.decimals))},this.resume=function(){j.startTime=null,j.duration=j.remaining,j.startVal=j.frameVal,requestAnimationFrame(j.count)},this.formatNumber=function(a){a+="";var b,c,d,e;if(b=a.split("."),c=b[0],d=b.length>1?j.options.decimal+b[1]:"",e=/(\d+)(\d{3})/,j.options.useGrouping)for(;e.test(c);)c=c.replace(e,"$1"+j.options.separator+"$2");return c+d},j.d.innerHTML=j.formatNumber(j.startVal.toFixed(j.decimals))}
/* i think this set the physical dimensions in readyness for Counting Up */
function setHeightToHeaderElement()
{
var height = $(window).height();
var TopHeaderHeight = 0;
var HeaderHeight = 0;
var TopBarHeight = 0;
var PosPromoHeight = 0;
if (typeof $('#jsn-topheader') !== 'undefined')
{
var TopHeaderHeight = $('#jsn-topheader').outerHeight();
}
if (typeof $('#jsn-header') !== 'undefined')
{
var HeaderHeight = $('#jsn-header').outerHeight();
}
if (typeof $('#jsn-topbar') !== 'undefined')
{
var TopBarHeight = $('#jsn-topbar').outerHeight();
}
if (typeof $('#jsn-pos-promo') !== 'undefined')
{
var PosPromoHeight = $('#jsn-pos-promo').outerHeight();
}
var topMarginOffsetPromo = - (TopHeaderHeight + HeaderHeight + TopBarHeight);
var topMarginOffsetIS = - (height / 2);
$( '#jsn-promo' ).css('margin-top',topMarginOffsetPromo+'px'); // Set negative margin value for #jsn promo
$( '#jsn-promo' ).height(height); // Set height to #jsn-promo equals to height of windows
$( '#jsn-pos-promo' ).css('margin-top',topMarginOffsetIS+'px'); // Set margin-top to #jsn-pos-promo to vertically align it
$( '#jsn-pos-promo' ).height(height);
}
//----------------------------------------
// Now the javascript has been setup this code triggers all the effects
$(document).ready( function()
{
/* CountUp Number by https://github.com/inorganik/countUp.js */
if ($('#demo-countingup-stats').hasClass('appearing')) {
if (typeof(countUp) !== 'undefined')
{
var options = {
useEasing : true,
useGrouping : true,
separator : ',',
decimal : '.'
}
// set the counting up module numbers here
// ( Starting Number / Target Number / Number of decimals / Time to get to Final Number / Additional Options)
// ( startVal / endVal / decimals / duration / options )
var countup1 = new countUp("counting-1", 01, 36, 0, 5, options);
var countup2 = new countUp("counting-2", 01, 54, 0, 5, options);
var countup3 = new countUp("counting-3", 01, 12, 0, 5, options);
var countup4 = new countUp("counting-4", 01, 90, 0, 5, options);
}
$( '#demo-countingup-stats' ).waypoint(function()
{
$( '#demo-countingup-stats' ).addClass( 'scroll-action' );
countup1.start();
countup2.start();
countup3.start();
countup4.start();
}, {
offset: '80%'
})
}
});
//----------------------------------------
})(jQuery);
}, 0);
HTML
<div class="jsn-mobile jsn-demo-page"> <div id="demo-countingup-stats" class="appearing"> <div class="grid-layout countingup-stats"> <div class="grid-col"> <div class="stat-group"> <h3 class="heading"><a href="#">Our-Team</a></h3> <h4 class="sub-heading">Powered-By</h4> <div id="counting-1" class="counting-number">01</div> <p class="desc">Soldiers</p> </div> </div> <div class="grid-col"> <div class="stat-group"> <h3 class="heading"><a href="#">Works</a></h3> <h4 class="sub-heading">Done</h4> <div id="counting-2" class="counting-number">01</div> <p class="desc">Projects</p> </div> </div> <div class="grid-col"> <div class="stat-group"> <h3 class="heading"><a href="#">Design</a></h3> <h4 class="sub-heading">Winning</h4> <div id="counting-3" class="counting-number">01</div> <p class="desc">Awards</p> </div> </div> <div class="grid-col"> <div class="stat-group"> <h3 class="heading"><a href="#">Client</a></h3> <h4 class="sub-heading">Quantity</h4> <div id="counting-4" class="counting-number">01</div> <p class="desc">And more</p> </div> </div> </div> </div> </div>
Notes
- This is taken from the JSN Mini template
- This is based on the Javascript called CountUp from https://github.com/inorganik/countUp.js
- Add the class jsn-demo-page to the page suffix to get the code to work
- To get this demo working without adding the page suffix jsn-demo-page I wrapped the code in
<div class="jsn-mobile jsn-demo-page"></div>
- This simulates adding the class but this technique can also be used if you want to use it in a module.
- You can remove the .jsn-demo-page from the CSS as another option instead of wrapping the CSS code in the<div> above.
- I also had to change the following Javascript to get the demo to work. You can use whatever you want, but these alterations work.
if ($('#jsn-master').hasClass('jsn-demo-page')) {to
if ($('#demo-countingup-stats').hasClass('appearing')) { - The numbers are altered in the Javascript
- The counting is triggered by a waypoint which is configured in the Javascript as needed.
- The Parallax effect does not require any more code.
- The background is optional and is black unless covered, but if you dont use the triangles background make sure you disable the background reference in the css
- 'physical dimensions in readyness for Counting Up' section might not be required, delete it and try.
- I dont know where the Parallax Scrolling effect is coming from, might be built into CountUp.