jQuery Text Flip Animation Plugin - Flipping Text

File Size: 5.97 KB
Views Total: 4857
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Text Flip Animation Plugin - Flipping Text

Flipping Text is a jQuery animation plugin to create text flip animation for your typography.

How to use it:

1. Load the jQuery library and jQuery Flipping Text plugin in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.flipping_text.js"></script>

2. Create the text you want to apply the flip animation.

<h2 class="demo">Your Text Goese Here</h2>

3. Call the plugin with default options.

<script>
$(document).ready(function(){
$(".demo").flipping_text();
});
</script>

4. Configurations.

<script>
$(document).ready(function(){
$(".demo").flipping_text({
tickerTime: 10, // Define a time between each ticket in milliseconds. The default value is 10.
customRandomChar: false, // You can use your own random strings by defining them here. The default value is false which will use my random string: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
tickerCount: 10, // Set the number of characters randomly shown before the real text is shown here. The default value is 10.
opacityEffect: true, // You can toggle the opacity effect here. Set this to false if you don't want the random text to fade in. The default value is 10.
resetOnChange: false // Toggle this to true if you want the plugin to stop and fill in all the text immediately when the user changes browser's tab. The default value is false.
});
});
</script>

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