<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.1.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: _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