Animated Number Counts

Animated number counts are popular to show off any overall statistic to your visitors, like number of customers, posts, or anything you want to display related to a count.

YayPages does not currently have a ready made block for this which gives the option to completely get a blank canvas for our unique number count. With this method, you can build your own number count and design it how you would like using basic elements from the YayPages editor. You really just need an image or icon, a paragraph text for for the number and another paragraph for the label text below. I will not get into building up the elements themselves.

In short:

- add a section or a row with any number of columns you would like (the number of items you would like to display, unlimited) 

- add an image or icon into the first column 

- add a paragraph text which will be the number itself and enter as content "1" so you can see the styling of the font (let's call this MAIN PARAGRAPH, will be used later) 

- add another paragraph text which will be the label below the number count 

- style the column as you would like to know by selecting image,setting font sizes and colors (every styling will be kept and used as it is) 

- clone the elements over to the other columns you have and change the icons/images and labels as you would like

You do not have to keep the design above, you can let your imagination free, use multiple rows or whatever you would like.

For the section or line which holds all your elements add a custom class called "count_up_holder"

For all of the MAIN PARAGRAPHS which are your number you will need to add some custom classes to, please note that you need to add it for all four or any number of elements you might have.

First class to add is "count_up" then leave out a space and add the second class. Second class is "count_to-123" and this is a custom class. The number in the end of the class, defines the number to which the count will run from 1. You can use any number there and it can be different for all elements,, important is to keep the format and add your custom number after the dash character.

You will need to add a custom JavaScript code to your page to, which can be easily done from the page settings and custom includes:

Below is the raw code to add:

1. <script>
2. /* Counter - CountTo */
3. $( document ).ready(function() {
4.     var a = 0;
5.     $(window).scroll(function() {
6.         if ($('.count_up').length) { // checking if CountTo section exists in the page, if not it will not run the script and avoid errors  
7.             var oTop = $('.count_up_holder').offset().top - window.innerHeight;
8.             if (a == 0 && $(window).scrollTop() > oTop) {
9.             $('.count_up').each(function() {
10.                 var $this = $(this);
11.                 count_classes = $this.attr('class');
12.                 var res = count_classes.split(" ");
13.                 var class_count = res.length; 
14.  
15.                 var i = 0;
16.                 while (i < class_count) {
17.                     var class_name = res[i];
18.                     if (class_name.indexOf('count_to') > -1) {
19.                         var res2 = class_name.split("-");
20.                         var countTo = res2[1];
21.                     }
22.                     i++;
23.                 }
24.  
25.                 $({
26.                 countNum: $this.text()
27.                 }).animate({
28.                     countNum: countTo
29.                 },
30.                 {
31.                     duration: 2000,
32.                     easing: 'swing',
33.                     step: function() {
34.                         var $target = $this.children();
35.                         while( $target.length ) {
36.                             $target = $target.children();
37.                         }
38.                         $target.end().text(Math.floor(this.countNum));
39.                     },
40.                     complete: function() {
41.                         var $target = $this.children();
42.                         while( $target.length ) {
43.                             $target = $target.children();
44.                         }
45.                         $target.end().text(this.countNum);
46.                     }
47.                 });
48.             });
49.             a = 1;
50.             }
51.         }
52.     });
53. });
54. </script>

With this you are done, you can save your page and you can preview or publish your changes.

Things to note:

- the script is made to trigger on scroll, these statistics are usually displayed further down on the page. If you want to use it on load in the view without scrolling, then please let us know and we can modify it for you easily.

- If you have some programming/javascript knowledge, then feel free to edit it based on your needs, for example you can use this only once in the page since only the last occurrence will trigger the animation effect. If you do not have the required knowledge then feel free to contact us and we can help you out.

- you do not have to stick to the common look, feel free to experiment with new styling, as long as the custom classes are set, it will work.

Thanks, I hope you found this helpful!