Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <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
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement