Download

Bare Bones

For the everyday developer, nothing more than the essentials, pack'd, tar'd and vacuum-sealed in shrink wrap for a lightening fast downloading experience.

Turbo Charged

For those who like to tinker, get the uncompressed code, fully commented with a source PSD included so you can customize the look of your flipCounter.

Usage

FlipCounter is easy to implement, follow these steps:

  1. In your pages head tags include jQuery (I'm using google's copy). If you'd like to use easing functions in your flipCounter animations then you should next include jQuery.easing. Finally, include the flipCounter .js file that you downloaded above.
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
    <script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
    <script src="js/jquery.flipCounter.1.2.pack.js" type="text/javascript"></script>
  2. Next you need to put your flipCounter-medium.png image sprite into your website's images folder. By default, flipCounter expects this file at 'img/flipCounter-medium.png' relative to your html file. If you use a different folder structure, or want to build your own image sprite, that's totally fine! I'll show you how to customize it soon.
  3. Now that the image is in the right location, to setup our flipCounters we simply need to place the following code somewhere on our page.
    <div id="counter"><input type="hidden" name="counter-value" value="100" /></div>
    <script type="text/javascript">
    /* <![CDATA[ */
    	jQuery(document).ready(function($) {
    		$("#counter").flipCounter();		
    	});
    /* ]]> */
    </script>
  4. The hidden field inside the div allows us to pass an initial value into the counter. So if you need a way to load a variable from PHP or whatever web scripting language you use, this is how to do it. Now you should now have a crisp "100" on your page.
  5. To customize the flipCounter we simply pass a list of options into our constructor. For example
    $("#counter").flipCounter({
    	number:0, // the initial number the counter should display, overrides the hidden field
    	numIntegralDigits:1, // number of places left of the decimal point to maintain
    	numFractionalDigits:0, // number of places right of the decimal point to maintain
    	digitClass:"counter-digit", // class of the counter digits
    	counterFieldName:"counter-value", // name of the hidden field
    	digitHeight:40, // the height of each digit in the flipCounter-medium.png sprite image
    	digitWidth:30, // the width of each digit in the flipCounter-medium.png sprite image
    	imagePath:"img/flipCounter-medium.png", // the path to the sprite image relative to your html document
    	easing: false, // the easing function to apply to animations, you can override this with a jQuery.easing method
    	duration:10000, // duration of animations
    	onAnimationStarted:false, // call back for animation upon starting
    	onAnimationStopped:false, // call back for animation upon stopping
    	onAnimationPaused:false, // call back for animation upon pausing
    	onAnimationResumed:false // call back for animation upon resuming from pause
    });

Actions and Animations

You can call functions on flipCounter to set or retrieve the value of the counter or create animations.

  • setNumber / renderCounter:
    $("#counter").flipCounter("setNumber",42); // immediately sets the number to 42.
    $("#counter").flipCounter("renderCounter",42); // same as above
  • getNumber
    alert($("#counter").flipCounter("getNumber")); // alert whatever number is currently displayed
  • startAnimation
    $("#counter").flipCounter(
    	"startAnimation", // scroll counter from the current number to the specified number
    	{
    		number: 5, // the number we want to scroll from
    		end_number: 1024, // the number we want the counter to scroll to
    		easing: jQuery.easing.easeOutCubic, // this easing function to apply to the scroll.
    		duration: 5000, // number of ms animation should take to complete
    		onAnimationStarted: myStartFunction, // the function to call when animation starts
    		onAnimationStopped: myStopFunction, // the function to call when animation stops
    		onAnimationPaused: myPauseFunction, // the function to call when animation pauses
    		onAnimationResumed: myResumeFunction // the function to call when animation resumes from pause
    	}
    );
  • stopAnimation
    $("#counter").flipCounter("stopAnimation"); // stop the animation wherever it is
  • pauseAnimation
    $("#counter").flipCounter("pauseAnimation"); // pause animation, can be resumed by calling resumeAnimation
  • resumeAnimation
    $("#counter").flipCounter("resumeAnimation"); // resume animation, can be paused by calling pauseAnimation

Customize

When you download the developer package, a PSD file is included that you can use a template for creating your own custom sprite. Edit this file to style it in any way you want, simply being sure that each digit has an equal width and height, and that each digit appears in the same order as in the original. Save the image into your website's images folder.

Here's an example. This image is located at img/flipCounter-custom.png, each digit is 50 pixels wide and 67 pixels tall. I can use it as a flipCounter with the following code:

$("#grunge_counter").flipCounter({imagePath:"img/flipCounter-custom.png",digitHeight:67,digitWidth:50, number:244});
Example:

Number Formatting

Version 1.1 of the plugin adds support for the jquery-numberformatter plugin. This will allow you greater control over the display of your numbers. When you decide to use this plugin the flipCounter options 'numIntegralDigits' and 'numFractionalDigits' are ignored in favour of the configuration you set up for jquery-numberformatter.

To use the number formatter plugin follow these steps:

  1. Download jshashtable-2.1 as it is required by jquery-number formatter.
  2. Download jquery.numberformatter-1.2.2.min.js
  3. Include these two scripts in the following order:
    <!-- Include jQuery before this line -->
    <script src="js/jshashtable.js" type="text/javascript"></script>
    <script src="js/jquery.numberformatter-1.2.2.min.js" type="text/javascript"></script>
    <!-- Include flipCounter after this line -->
  4. Pass the numberformatter configuration options into flipCounter with the following code:
    $("#foreign-counter").flipCounter({number:123456789.5, formatNumberOptions:{format:"000,000,000.##",locale:"de"}});

The result is a counter that conforms to the german number formatting standards. For more information on jquery-numberformatter configuration settings, visit the projects homepage.

Change Log

  • Version 1.2
    • Start animation now requires you to pass the parameter 'end_number' to define the number that should be counted to, instead of passing the parameter as 'number'. Passing the parameter 'number' or 'start_number' sets the value that will be counted from
    • Resuming an animation that was paused is now done by calling the action 'resumeAnimation' and not 'startAnimation'
    • No need to initialize the flipCounter before you use one of the actions or animations.
    • CSS Method for hiding the digits has been updated to support earlier versions of Internet Explorer.
    • Interrupting an animation that has been started stops the current animation and begins a new one
    • Animations can be paused and unpaused
  • Version 1.1
    • Added support for jquery-numberformatter. NOTE: If you want to use jquery-numberformatter, you must update the flipCounter-medium.png sprite as well. The old version did not contain a ',' or ' ' character
  • Version 1.0
    • Initial Functionality

Questions

Have a question? Experiencing an issue? Want to show off how you're using flipCounter. Post a message on our Facebook wall.