Blog Post 6: jQuery Number Counter

The website I chose this week is the 10 years review done by the PSD2HTML.

Screen Shot 2015-04-12 at 21.37.47

No doubt, this is a well-designed website. But I think the most attractive element there is those changing numbers. They give readers a direct look at the progress PSD2HTML has made in the past ten years. This effect is consistent with the nature of numbers and it makes this website more interactive.

Screen Shot 2015-04-12 at 22.16.49

After examining the code, I found that it used jQuery to make this happen.

The script code is as follows:

function initNumber() {

            jQuery(‘span.number, div.number’).each(function(i) {

                        new NumberCounter({

                                    holder: this

                        });

            });

}

function NumberCounter(options) {

            this.options = jQuery.extend({

                        holder: null,

                        counterSpeed: 600,

                        step: 5,

                        divider: ‘.’,

                        activeClass: ‘active’

            }, options);

            return this.init();

}

NumberCounter.prototype = {

            init: function() {

                        this.findElements();

                        this.attachEvents();

                        this.reset();

            },

I think using number counter s a really useful way to display multiple numbers. Instead of using just the steady numbers, it gives the website more diversities.

Advertisements

About Zhou Hang

Graduate student of Missouri School of Journalism. Enterprise reporter for the Columbia Missourian. Interested in movie, music, cycling, tennis and jogging.

3 thoughts on “Blog Post 6: jQuery Number Counter

  1. I really like the jQuery that you found. Number counter does make this site interactive. Without it, this page would be just as static and boring as a piece statement. Most importantly, the number counter serves the purpose of the website well and since the numbers add up quickly, it gives a sense of fast growth and development, which is very good publication for the company.

    Like

  2. It is a practical function of jQuery. The best part is that we can control every step of the effect, from the style of the numbers to the speed of counting. In addition, numbers are good visual elements of

    Like

  3. It is a practical function of jQuery. The best part is that we can control every step of the effect, from the style of the numbers to the speed of counting. In addition, numbers are eye-catching visual elements to stir readers’ curiosity. When I saw the large white numbers highlighted on the dark background, I want to read in detail about how to interpret these numbers. So from the perspective of design, using interactive numbers is a compelling storytelling method.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s