jQuery Plugin To Reveal Numbers with CSS3 Transitions - FlipPhone

File Size: 59.5KB
Views Total: 1364
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Reveal Numbers with CSS3 Transitions - FlipPhone

FlipPhone is a fancy jQuery plugin that converts the alphanumeric numbers into digits with CSS3 flip aniamtions. For instance, you can use the plugin to hide your telephone numbers on your web page to prevent spam.

  • ABC: 2
  • DEF: 3
  • GHI: 4
  • JKL: 5
  • MNO: 6
  • PQRS: 7
  • TUV: 8
  • WXYZ: 9
  • Others: 0

How to use it:

1. Insert a telephone number using alphanumeric on your web page. 

<a class="tel" href="tel:1-800-1DG-JMPT">1-800-1DG-JMPT</a>

2. Load the jQuery library and jQuery flipphone plugin in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="src/jquery.flipphone.js"></script> 

3. Call the plugin.

<script>
(function($){
$(document).ready(function() {
$('.tel').flipPhone();
});
})(jQuery);
</script> 

4. Options.

<script>
(function($){
$(document).ready(function() {
$('.tel').flipPhone({
speed: 500,
delay: 100,
letterSpacing: 10,
onComplete:null
});
});
})(jQuery);
</script> 

This awesome jQuery plugin is developed by mike-zarandona. For more Advanced Usages, please check the demo page or visit the official website.