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.

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: _noEasing, // 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 }); Actions and Animations You can call functions on flipCounter to set or retrieve the value of the counter or create animations. setNumber / renderNumber: $("#counter").flipCounter("setNumber",42); // immediately sets the number to 42. $("#counter").flipCounter("renderNumber",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: 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 } ); stopAnimation $("#counter").flipCounter("stopAnimation"); // stop the animation wherever it is pauseAnimation $("#counter").flipCounter("pauseAnimation"); // pause animation, can be resumed by calling startAnimation